:root{--bg:#262626;--bg2:#2e2e2e;--bg3:#363636;--border:#404040;--accent:#01C48B;--accent2:#01C48B;--red:#FE375F;--yellow:#f59e0b;--text:#D9D9D9;--text2:#A6A6A6;--text3:#737373;--r:10px;--shadow-card:0 2px 8px rgba(0,0,0,.25)}
body.theme-light{--bg:#F5F5F5;--bg2:#FFFFFF;--bg3:#ECECEC;--border:#EDEDED;--accent:#01A776;--accent2:#01A776;--red:#E01E4D;--yellow:#B8860B;--text:#262626;--text2:#5A5A5A;--text3:#8A8A8A;--shadow-card:0 2px 10px rgba(0,0,0,.07)}
body.theme-light .kpi-y{color:#3a2f00}
body.theme-light .hm-tip{background:#FFFFFF;box-shadow:0 8px 24px rgba(0,0,0,.15)}
body.theme-light input,body.theme-light select,body.theme-light textarea{background:#FFFFFF}
body.theme-light ::-webkit-scrollbar-track{background:#F5F5F5}
body.theme-light .cal-cell{background:#ECECEC}
body.theme-light .cal-cell.win{background:var(--accent);color:#04231a}
body.theme-light .ms-map-bg{display:none}
body.theme-light .ms-map-bg-light{display:block;opacity:.55}
body.theme-light .cal-cell.loss{background:var(--red);color:#fff}
body.theme-light .cal-cell.empty{background:transparent}
body.theme-light .type-fx,body.theme-light .type-cry{color:#01A776}
body.theme-light .type-drv{color:#E01E4D}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%} /* Tắt tính năng Safari di động tự phóng to chữ để "dễ đọc" — mặc định nổi tiếng của Safari,
  khiến chữ hiển thị to hơn kích thước đã đặt trong CSS (font-size), gây tràn/chồng lấn ở những khu vực chật hẹp
  như bảng thống kê nhiều ô nhỏ. KHÔNG có dòng này, mọi cỡ chữ đặt trong CSS chỉ là "gợi ý", Safari có thể tự ý phóng to thêm. */
body{background:var(--bg);color:var(--text);font-family:'Aptos','Aptos Display',Calibri,'Segoe UI',system-ui,sans-serif;font-size:14px;height:100vh;overflow:hidden}
.app{display:flex;height:100vh}
.sidebar{width:220px;background:var(--bg2);border-right:1px solid var(--border);padding:20px 0;flex-shrink:0;display:flex;flex-direction:column;transition:width .2s ease;position:relative;overflow-y:auto}
.sidebar.collapsed{width:64px}
.sidebar.collapsed .logo-title,.sidebar.collapsed .logo-name,.sidebar.collapsed .logo-sub,
.sidebar.collapsed .nav-section,.sidebar.collapsed .acc-badge-detail{display:none}
.sidebar.collapsed .logo{padding:0 12px 16px}
.sidebar.collapsed .logo-brand{justify-content:center}
.sidebar.collapsed .nav-item{justify-content:center;padding:10px 0;gap:0;font-size:0}
.sidebar.collapsed .nav-item span{font-size:15px}
.sidebar.collapsed .sidebar-bottom{display:none}
.sb-toggle{position:absolute;top:16px;right:-13px;width:26px;height:26px;border-radius:50%;background:var(--bg2);border:1px solid var(--border);color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;z-index:20;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .2s ease}
.sb-toggle:hover{color:var(--accent);border-color:var(--accent)}
.sidebar.collapsed .sb-toggle{transform:rotate(180deg)}
.main{flex:1;overflow-y:auto;overflow-x:hidden}
body.has-top-banner .main{padding-top:52px} /* chừa chỗ cho banner cảnh báo (áp dụng mọi màn hình, di động sẽ ghi đè giá trị lớn hơn ở phần responsive bên dưới) */

/* ===== Làm mờ/khóa các nút Thêm/Sửa/Xóa lệnh khi tài khoản hết hạn ===== */
body.account-expired [onclick^="openModal"],
body.account-expired [onclick^="editTrade"],
body.account-expired [onclick^="delTrade"]{
  opacity:.35 !important;
  pointer-events:none !important;
  cursor:not-allowed !important;
  filter:grayscale(.4);
}
.logo{padding:0 20px 20px;border-bottom:1px solid var(--border);margin-bottom:8px}
.logo-brand{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.logo-icon{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--accent) 0%,#016c4c 100%);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:900;color:#fff;letter-spacing:-.5px;flex-shrink:0;box-shadow:0 2px 8px rgba(1,196,139,.35)}
.logo-title{font-size:13px;font-weight:800;color:var(--text);letter-spacing:.2px}
.logo-name{font-size:11px;color:var(--text3);margin-top:2px}
.logo-sub{font-size:11px;color:var(--text3);margin-top:2px}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 20px;cursor:pointer;color:var(--text2);transition:all .15s;border-left:3px solid transparent;font-size:13px}
.nav-item:hover{background:var(--bg3);color:var(--text)}
.nav-item.active{color:var(--accent);background:rgba(1,196,139,.08);border-left-color:var(--accent)}
.nav-section{padding:16px 20px 6px;font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:1px}
.sidebar-bottom{margin-top:auto;padding:16px 20px;border-top:1px solid var(--border)}
.acc-badge{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:10px 12px}
.page{display:none;padding:28px 32px}
.page.active{display:block}
.ph{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;position:sticky;top:-28px;z-index:40;background:var(--bg);padding:28px 0 12px;margin-top:-28px}
.pt{font-size:22px;font-weight:700}
.ps{font-size:13px;color:var(--text2);margin-top:3px}
.sg{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.sc{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:18px 20px}
.sl{font-size:clamp(9px,0.7vw,11px);color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.sv{font-size:clamp(16px,1.5vw,24px);font-weight:700}
.mchip{display:flex;justify-content:space-between;align-items:center;background:var(--bg3);border-radius:6px;padding:5px 8px;font-size:clamp(9px,0.7vw,10.5px);gap:4px}
.mchip-big{flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:clamp(6px,0.8vw,10px) clamp(4px,0.6vw,8px);font-size:clamp(9px,0.75vw,11px)}
.hm-tl-item{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-bottom:1px solid var(--border);font-size:12px;cursor:pointer}
.hm-tl-item:last-child{border-bottom:none}
.hm-tl-item:hover{background:var(--bg3)}
.hm-tl-date{font-size:10.5px;color:var(--text3)}
.hm-tl-sym{font-weight:700;color:var(--text)}
.hm-tl-dir{font-size:9.5px;padding:1px 5px;border-radius:3px;margin-left:5px}
.hm-tl-dir.buy{background:rgba(1,196,139,.15);color:var(--accent)}
.hm-tl-dir.sell{background:rgba(254,55,95,.15);color:var(--red)}
.hm-tl-pnl{font-weight:700;font-size:12.5px}
.hm-tl-chart-btn{margin-left:8px;padding:2px 5px;cursor:pointer;font-size:12px;opacity:.75;border-radius:4px;text-decoration:none}
.hm-tl-chart-btn:hover{opacity:1;background:var(--bg2)}
.mchip-big .mchip-v{font-size:clamp(13px,1.15vw,17px);line-height:1.1}
.mchip-l{color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mchip-v{font-weight:700;color:var(--text);white-space:nowrap}
.sv.g{color:var(--accent)}.sv.r{color:var(--red)}.sv.b{color:var(--accent2)}
.ss{font-size:11px;color:var(--text3);margin-top:4px}
.cg{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-bottom:24px}
.cc{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:20px;margin-bottom:0}
.ct{font-size:13px;font-weight:600;color:var(--text2);margin-bottom:16px}
/* ===== INFO TOOLTIP SYSTEM ===== */
.info-ic{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:var(--bg3);color:var(--text3);font-size:10px;font-weight:700;font-style:italic;font-family:Georgia,serif;cursor:help;margin-left:5px;vertical-align:middle;position:relative;flex-shrink:0}
.info-ic:hover{background:var(--accent);color:#00120c}
.info-ic .info-tip{visibility:hidden;opacity:0;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);width:260px;background:#1a1a1a;color:#e8e8e8;font-family:'Aptos','Aptos Display',Calibri,'Segoe UI',system-ui,sans-serif;font-size:12px;font-weight:400;font-style:normal;line-height:1.65;letter-spacing:.1px;text-align:left;padding:12px 14px;border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.4);z-index:200;transition:opacity .15s ease;pointer-events:none;white-space:normal;word-spacing:normal}
.info-ic .info-tip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:#1a1a1a}
.info-ic:hover .info-tip{visibility:visible;opacity:1}
.info-ic .info-tip.right{left:0;transform:translateX(0)}
.info-ic .info-tip.right::after{left:14px;transform:translateX(0)}
.info-ic .info-tip.left{left:auto;right:0;transform:translateX(0)}
.info-ic .info-tip.left::after{left:auto;right:14px;transform:translateX(0)}
.kpi{position:relative}
.kpi .info-ic{position:absolute;top:5px;right:5px;margin:0}
.cw{position:relative;height:220px;width:100%}
.cw canvas{max-width:100% !important}
.tc{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
table{width:100%;border-collapse:collapse}
th{padding:10px 14px;text-align:left;font-size:11px;color:var(--text3);text-transform:uppercase;border-bottom:1px solid var(--border);background:var(--bg3);font-weight:500}
td{padding:11px 14px;border-bottom:1px solid rgba(30,45,69,.5);font-size:13px;word-break:break-word;overflow-wrap:break-word}
tr:last-child td{border-bottom:none}
tr:hover td{background:rgba(255,255,255,.02)}
.badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600}
.bb{background:rgba(1,196,139,.15);color:var(--accent)}
.bs{background:rgba(254,55,95,.15);color:var(--red)}
.pp{color:var(--accent);font-weight:600}.pn{color:var(--red);font-weight:600}
.tv-link{color:var(--accent2);text-decoration:none;font-size:12px}
/* Ô tự đánh giá trong trang Báo cáo */
.rpt-eval-block{margin-top:20px;border-top:1px solid var(--border);padding-top:16px}
.rpt-eval-label{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}
.rpt-eval-row{margin-bottom:12px}
.rpt-eval-q{font-size:13px;color:var(--text2);margin-bottom:6px;font-weight:600}
.rpt-eval-hint{font-size:11px;color:var(--text3);font-style:italic;margin-bottom:6px}
.rpt-eval-ta{width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:10px 12px;font-size:13px;font-family:inherit;resize:vertical;min-height:72px;box-sizing:border-box;outline:none}
.rpt-eval-ta:focus{border-color:var(--accent)}
/* Drag & drop lệnh */
.tr-drag{cursor:grab;user-select:none}
.tr-drag:active{cursor:grabbing}
.tr-dragging{opacity:.4;background:var(--bg3) !important}
.tr-drag-over{border-top:2px solid var(--accent) !important}
.drag-handle{color:var(--text3);font-size:14px;cursor:grab;padding:0 4px;opacity:.5}
.drag-handle:hover{opacity:1;color:var(--accent)}
#drag-hint{font-size:11px;color:var(--text3);margin-bottom:8px;display:flex;align-items:center;gap:6px}
#drag-hint svg{flex-shrink:0}
/* Trang Trạng thái hôm nay */
.rd-opt2{flex:1;min-width:140px;background:var(--bg3);border:1.5px solid var(--border);border-radius:10px;padding:12px 14px;cursor:pointer;transition:border-color .15s,background .15s}
.rd-opt2:hover{border-color:var(--accent);background:var(--bg2)}
.rd-opt2.selected{border-color:var(--accent);background:rgba(1,196,139,.1)}
/* Banner sẵn sàng: desktop trong grid, mobile full-width bên dưới */
.readiness-banner-mobile{display:none}
@media(max-width:600px){
  .readiness-banner-desktop{display:none !important}
  .readiness-banner-mobile{display:flex !important}
}
/* ===== PRINT: ẩn toàn bộ app, chỉ hiện nội dung báo cáo ===== */
@media print{
  body > *:not(#rpt-print-container){ display:none !important; }
  #rpt-print-container{
    display:block !important;
    position:static;width:100%;
    font-family:Arial,sans-serif;font-size:13px;color:#1a1a1a;background:#fff;
  }
  /* @page margin được set trong template PDF riêng */
}
/* Khu vực widget TradingView luôn giữ nền tối (#262626 — đúng màu --bg dark mode) bất kể
   giao diện app đang dùng sáng hay tối, vì widget chỉ có theme dark hoạt động đúng */
.tv-dark-bg{background:#262626 !important;border-radius:12px;overflow:hidden;padding:8px 0}
/* ===== 5 CHỈ SỐ DASHBOARD — MOBILE FIRST =====
   Mặc định: dọc (5 hàng riêng, nhãn trái + số phải). PC (>600px): ngang 5 cột.
   Không dùng Grid nữa — chỉ dùng Flexbox đơn giản, Safari không thể hiểu sai. */
.stat5-row{display:flex;flex-direction:column;padding:10px 0}
.stat5-item{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;gap:8px}
.stat5-sep{border-top:1px solid var(--border)}
.stat5-label{display:flex;align-items:center;gap:4px;flex:1;min-width:0}
.stat5-label .sl{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;margin-bottom:0}
.stat5-item .sv{font-size:13px;font-weight:700;white-space:nowrap}
@media(min-width:601px){
  .stat5-row{flex-direction:row;padding:14px 0 10px;align-items:stretch}
  .stat5-item{flex-direction:column;align-items:center;justify-content:flex-start;
    flex:1;text-align:center;padding:0 12px;border-top:none;gap:6px}
  .stat5-sep{border-top:none;border-left:1px solid var(--border)}
  .stat5-label{justify-content:center}
  .stat5-label .sl{font-size:clamp(9px,0.7vw,11px)}
  .stat5-item .sv{font-size:clamp(14px,1.3vw,20px)}
}
.fb{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap;align-items:center}
.fs{background:var(--bg2);border:1px solid var(--border);color:var(--text);padding:8px 12px;border-radius:8px;font-size:13px;cursor:pointer;outline:none}
.fs:focus{border-color:var(--accent)}
.si{background:var(--bg2);border:1px solid var(--border);color:var(--text);padding:8px 12px;border-radius:8px;font-size:13px;outline:none;width:200px}
.si:focus{border-color:var(--accent)}
.si::placeholder{color:var(--text3)}
.btn{padding:9px 18px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;border:none;transition:all .15s;display:inline-flex;align-items:center;gap:6px}
.bp{background:var(--accent);color:#000}.bp:hover{background:#01ac7a}
.bsc{background:var(--bg3);color:var(--text);border:1px solid var(--border)}.bsc:hover{border-color:var(--accent);color:var(--accent)}
.bd{background:rgba(254,55,95,.15);color:var(--red);border:1px solid rgba(254,55,95,.2)}
.bsm{padding:5px 12px;font-size:12px}
.mo{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:100;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.mo.open{display:flex}
.md{background:var(--bg2);border:1px solid var(--border);border-radius:14px;width:680px;max-width:95vw;max-height:90vh;overflow-y:auto}
.mh{padding:20px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.mt{font-size:16px;font-weight:700}
.mc{background:none;border:none;color:var(--text2);font-size:20px;cursor:pointer;padding:4px 8px;border-radius:6px}
.mc:hover{background:var(--bg3)}
.mb{padding:24px}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fgf{grid-column:1/-1}
.fg .fg-g{display:flex;flex-direction:column;gap:6px}
label{font-size:12px;color:var(--text2);font-weight:500}
input,select,textarea{background:var(--bg3);border:1px solid var(--border);color:var(--text);padding:9px 12px;border-radius:8px;font-size:13px;outline:none;width:100%;font-family:inherit}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
input::placeholder,textarea::placeholder{color:var(--text3)}
textarea{resize:vertical;min-height:70px}
.mf{padding:16px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px}
.dc{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}
.dcard{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:20px}
.dcard.warn{border-color:rgba(245,158,11,.3)}.dcard.danger{border-color:rgba(254,55,95,.3)}.dcard.good{border-color:rgba(1,196,139,.3)}
.di{font-size:28px;margin-bottom:10px}
.dtitle{font-size:14px;font-weight:700;margin-bottom:6px}
.ddesc{font-size:12px;color:var(--text2);line-height:1.6}
.dval{font-size:22px;font-weight:700;margin:8px 0}
.sl-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.sl-item{background:var(--bg3);border-radius:8px;padding:12px 14px;font-size:13px;color:var(--text2);border-left:3px solid var(--accent);line-height:1.5}
.sl-item.warn{border-left-color:var(--yellow)}.sl-item.danger{border-left-color:var(--red)}
.empty{text-align:center;padding:60px 20px;color:var(--text3)}
.empty-i{font-size:48px;margin-bottom:16px}
.empty-t{font-size:16px;font-weight:600;color:var(--text2);margin-bottom:8px}
.toast{position:fixed;bottom:24px;right:24px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:14px 18px;font-size:13px;z-index:999;transform:translateY(100px);opacity:0;transition:all .3s;display:flex;align-items:center;gap:10px}
.toast.show{transform:translateY(0);opacity:1}
.toast.success{border-left:3px solid var(--accent)}.toast.error{border-left:3px solid var(--red)}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.ra{display:flex;gap:6px}
/* HEATMAP */
.hm-wrap{display:flex;flex-direction:column;gap:0}
.hm-cell{width:56px;height:56px;border-radius:6px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:1px solid rgba(255,255,255,.04);transition:transform .1s;flex-shrink:0}
.hm-cell:hover{transform:scale(1.06);z-index:5;border-color:rgba(255,255,255,.2)}
.hm-date{font-size:11px;font-weight:700;line-height:1}
.hm-pnl{font-size:10px;font-weight:600;line-height:1}
.hm-cnt{font-size:9px;opacity:.75;line-height:1}
.hm-tip{position:fixed;background:#262626;border:1px solid var(--border);border-radius:8px;padding:10px 14px;font-size:12px;color:var(--text);z-index:200;pointer-events:none;display:none;min-width:160px;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.hm-tip strong{display:block;margin-bottom:6px;font-size:13px;border-bottom:1px solid var(--border);padding-bottom:6px}
.he{background:transparent;border-color:transparent!important;pointer-events:none}
.h0{background:var(--bg3)}
.hl3{background:#8c1e34}.hl2{background:#cb2c4c}.hl1{background:#FE375F}.hl0{background:#ffa5b7}
.hw0{background:#8de4cb}.hw1{background:#01a776}.hw2{background:#01C48B}.hw3{background:#016c4c}
/* SETTINGS */
.ss-sec{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:24px;margin-bottom:20px}
.ss-title{font-size:15px;font-weight:700;margin-bottom:6px}
.ss-sub{font-size:12px;color:var(--text3);margin-bottom:20px}
.tag-list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.tag{background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:5px 10px;font-size:12px;display:flex;align-items:center;gap:6px;color:var(--text2)}
.tag-x{cursor:pointer;color:var(--text3);font-size:14px}.tag-x:hover{color:var(--red)}
.tag-add{display:flex;gap:8px}
.acc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.acc-card{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:14px 16px;position:relative}
.acc-card-x{position:absolute;top:8px;right:8px;background:none;border:none;color:var(--text3);cursor:pointer;font-size:16px}.acc-card-x:hover{color:var(--red)}
.type-fx{background:rgba(1,196,139,.15);color:#01C48B}
.type-fut{background:rgba(245,158,11,.15);color:#f59e0b}
.type-stk{background:rgba(139,92,246,.15);color:#8b5cf6}
.type-drv{background:rgba(254,55,95,.15);color:#FE375F}
.type-cry{background:rgba(1,196,139,.15);color:#01C48B}
.type-com{background:rgba(251,146,60,.15);color:#fb923c}
.type-oth{background:rgba(100,116,139,.15);color:#8a8a8a}
/* KPI ROW */
/* MARKET SESSIONS TIMELINE */
.ms-wrap{position:relative;padding-top:4px}
.ms-kpi-panel{position:relative;overflow:hidden}
.ms-map-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.8;pointer-events:none;z-index:0}
.ms-map-bg-light{display:none}
.ms-kpi-overlay{position:absolute;inset:0;background:var(--bg2);opacity:.3;z-index:0}
.ms-kpi-content{position:relative;z-index:1}
.ms-row{display:flex;align-items:center;gap:12px;margin-bottom:8px;position:relative;z-index:1}
.ms-label{width:76px;font-size:12px;font-weight:600;color:var(--text2);flex-shrink:0}
.ms-track{position:relative;flex:1;height:22px;background:var(--bg3);border-radius:5px;overflow:visible}
.ms-bar{position:absolute;top:0;height:100%;border-radius:5px;opacity:.32;transition:opacity .3s}
.ms-bar.active{opacity:1;box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.ms-now-line{position:absolute;top:0;bottom:22px;width:2px;background:var(--red);z-index:5;pointer-events:none}
.ms-now-dot{position:absolute;top:-6px;width:8px;height:8px;border-radius:50%;background:var(--red);transform:translateX(-3px);z-index:6}
.ms-hours{display:flex;justify-content:space-between;font-size:9px;color:var(--text3);margin-top:2px;padding-left:88px;position:relative;z-index:1}
.ms-badge{display:inline-block;padding:3px 10px;border-radius:5px;font-size:11px;font-weight:700;margin-right:6px}
.kpi-row{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-bottom:24px}
.kpi{border-radius:10px;padding:clamp(8px,1vw,14px) clamp(6px,0.8vw,12px);text-align:center;background:rgba(46,46,46,.7);border:1px solid var(--border)}
body.theme-light .kpi{background:rgba(255,255,255,.75)}
.kpi-v{font-size:clamp(13px,1.1vw,19px);font-weight:800;line-height:1.1;color:var(--text)}
.kpi-p{font-size:clamp(9px,0.65vw,11px);font-weight:700;margin-top:2px;min-height:1.2em}
.kpi-l{font-size:clamp(8px,0.6vw,10px);text-transform:uppercase;letter-spacing:.4px;margin-top:6px;font-weight:600;opacity:.85;color:var(--text)}
.sec-h{font-size:19px;font-weight:800;color:var(--accent);margin:8px 0 16px;letter-spacing:.3px}
.sec-h .pink{color:var(--red)}
/* GRID LAYOUTS */
.grid-3{display:grid;grid-template-columns:1.1fr 1.4fr 1.6fr;gap:16px;margin-bottom:16px}
.grid-stats-main{display:grid;grid-template-columns:1.1fr 1.4fr 1.6fr;grid-template-rows:auto auto auto;align-items:start;gap:16px;margin-bottom:16px}
.mchip-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.sg-cols-5{display:grid;grid-template-columns:repeat(5,1fr)}
.grid-heatmap-list{grid-template-columns:1.8fr 1fr}
.grid-heatmap-list>div{min-width:0} /* Chặn lỗi Grid kinh điển: ô con có nội dung chiều rộng cố định (lịch heatmap 56px/ô) sẽ ép cả cột Grid phình to hơn khung chứa, kéo lệch khỏi nền card đằng sau. min-width:0 buộc ô con phải tự cuộn ngang bên trong (.cal-wrap đã có overflow-x:auto) thay vì đẩy phình cả layout ra ngoài. */
/* Phòng ngừa chung: áp dụng cùng nguyên tắc cho mọi khối lưới chính trong app (biểu đồ, thẻ
   thống kê... đều có thể gặp lỗi tương tự nếu bên trong có nội dung chiều rộng cố định) */
.grid-2>*,.grid-3>*,.grid-3e>*,.grid-stats-main>*,.kpi-row>*,.mchip-grid-4>*,.sg-cols-5>*,.lot-row>*{min-width:0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.grid-3e{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:16px}
.panel{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:20px;box-shadow:var(--shadow-card)}
/* STAT PANEL (left col) */
.stat-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:13px}
.stat-row .lbl{color:var(--text2)}
.stat-row .val{font-weight:700}
.donut-box{position:relative;width:150px;height:150px;margin:10px auto}
.win-gauge{position:relative;width:172px;height:172px;margin:14px auto 4px}
.win-gauge-ring{position:absolute;inset:0;border-radius:50%;-webkit-mask:radial-gradient(closest-side,transparent 78%,#000 79%);mask:radial-gradient(closest-side,transparent 78%,#000 79%)}
.win-gauge-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.win-gauge-mid .n{font-size:30px;font-weight:800;color:var(--text)}
.win-gauge-mid .l{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
.win-gauge-nums{display:grid;grid-template-columns:1fr 1fr;text-align:center;margin-bottom:4px}
.win-gauge-nums .win{color:var(--accent);font-size:20px;font-weight:800}
.win-gauge-nums .loss{color:var(--red);font-size:20px;font-weight:800}
.donut-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.donut-mid .n{font-size:24px;font-weight:800}
.donut-mid .l{font-size:10px;color:var(--text3);text-transform:uppercase}
.stat-2{display:grid;grid-template-columns:1fr 1fr;gap:14px 6px;text-align:center;margin-top:14px}
.stat-2 .box{padding:4px}
.stat-2 .box .n{font-size:18px;font-weight:800}
.stat-2 .box .l{font-size:11px;color:var(--text3);margin-top:3px}
/* QUALITY TABLE */
.qtable{width:100%;font-size:12px;margin-bottom:14px}
.qtable .qh{color:var(--yellow);font-weight:700;font-size:11px;text-transform:uppercase;margin-bottom:6px;letter-spacing:.4px}
.qtable table{width:100%}
.qtable td{padding:4px 2px;border:none;font-size:12.5px}
.qtable td:first-child{color:var(--text)}
.qtable td:nth-child(2){text-align:right;font-weight:700}
.qtable td:nth-child(3){text-align:right;color:var(--text2);width:50px}
/* CALENDAR HEATMAP */
.cal-wrap{overflow-x:auto}
.cal-grid{display:grid;grid-template-columns:44px repeat(7,1fr);gap:4px;min-width:760px}
.cal-hd{font-size:11px;color:var(--text3);text-transform:uppercase;text-align:center;padding:4px 0;font-weight:700}
.cal-hd.sun{color:var(--red)}
.cal-wk{display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--text3);font-weight:600}
.cal-cell{border-radius:6px;min-height:64px;padding:6px 8px;font-size:11px;position:relative;background:var(--bg3)}
.cal-cell.win{background:var(--accent);color:#04231a}
.cal-cell.loss{background:var(--red);color:#2b0410}
.cal-cell.empty{background:transparent}
.cal-cell .dnum{font-weight:700}
.cal-cell .damt{font-weight:800;font-size:13px;margin-top:10px}
.cal-cell .dcnt{font-style:italic;font-size:10px;margin-top:2px}
/* GAUGE / RADAR */
.gauge-num{font-size:34px;font-weight:800;color:var(--accent);text-align:center}
.gauge-sub{font-size:11px;color:var(--text3);text-align:center;margin-top:4px}
/* LOT CALCULATOR */
.lot-wrap{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:16px 20px;margin-bottom:16px}
.lot-title{font-size:12px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;display:flex;align-items:center;gap:6px}
.lot-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;align-items:end}
.lot-result{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:12px 16px;margin-top:10px;display:flex;gap:24px;flex-wrap:wrap;align-items:center}
.lot-result-item{text-align:center}
.lot-result-v{font-size:20px;font-weight:900;color:var(--accent)}
.lot-result-l{font-size:10px;color:var(--text3);margin-top:2px}
/* GUIDE PAGE */
.gd-tab{padding:7px 14px;border-radius:20px;border:1px solid var(--border);background:var(--bg2);color:var(--text2);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap}
.gd-tab:hover{border-color:var(--accent);color:var(--accent)}
.gd-tab.active{background:var(--accent);color:#000;border-color:var(--accent)}
.gd-pane{display:block}
.gd-hero{font-size:20px;font-weight:800;margin-bottom:8px}
.gd-desc{font-size:13px;color:var(--text2);margin-bottom:20px;line-height:1.7}
.gd-step{display:flex;gap:14px;margin-bottom:18px;align-items:flex-start}
.gd-step-num{width:28px;height:28px;border-radius:50%;background:var(--accent);color:#000;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.gd-step-body{flex:1;min-width:0}
.gd-step-title{font-size:14px;font-weight:700;margin-bottom:6px;color:var(--text)}
.gd-step-desc{font-size:13px;color:var(--text2);margin-bottom:8px;line-height:1.6}
.gd-list{margin:6px 0 8px 16px;padding:0;font-size:13px;color:var(--text2);line-height:1.8}
.gd-tip{background:rgba(1,196,139,.08);border-left:3px solid var(--accent);padding:8px 12px;border-radius:0 6px 6px 0;font-size:12px;color:var(--text2);margin-top:8px;line-height:1.6}
.gd-formula{background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:8px 14px;font-family:monospace;font-size:13px;margin:8px 0;color:var(--text)}
.gd-sec-label{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;margin:20px 0 10px}
.gd-card-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.gd-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:16px;text-align:center}
.gd-card-icon{font-size:26px;margin-bottom:8px}
.gd-card-title{font-size:13px;font-weight:700;margin-bottom:4px}
.gd-card-desc{font-size:12px;color:var(--text3);line-height:1.5}
.gd-kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gd-kpi-card{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:12px 14px}
.gd-kpi-name{font-size:11px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px}
.gd-kpi-desc{font-size:12px;color:var(--text2);line-height:1.5}
.gd-matrix{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.gd-matrix-cell{border-radius:8px;padding:12px;font-size:12px;line-height:1.5;text-align:center}
.gd-matrix-cell.c1{background:rgba(1,196,139,.15);border:1px solid var(--accent);color:var(--text)}
.gd-matrix-cell.c2{background:rgba(96,165,250,.12);border:1px solid #60a5fa;color:var(--text)}
.gd-matrix-cell.c3{background:rgba(254,55,95,.12);border:1px solid var(--red);color:var(--text)}
.gd-matrix-cell.c4{background:rgba(245,158,11,.12);border:1px solid var(--yellow);color:var(--text)}
.gd-badge-inline{font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;vertical-align:middle}
.gd-video{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:10px;margin-bottom:20px;background:var(--bg3)}
.gd-video iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;border-radius:10px}
@media(max-width:600px){
  .gd-card-row{grid-template-columns:1fr}
  .gd-kpi-grid{grid-template-columns:1fr 1fr}
  .gd-matrix{grid-template-columns:1fr 1fr}
}
/* ── CHẤT LƯỢNG GIAO DỊCH — 2 cột layout ── */
.cltl-root{display:grid;grid-template-columns:240px 1fr;gap:12px;align-items:stretch;width:100%;margin-bottom:12px;overflow:hidden}
.cltl-sidebar{background:var(--bg2);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-card);overflow:hidden;display:flex;flex-direction:column}
.cltl-sg{padding:10px 13px;border-bottom:1px solid var(--border);flex:1;display:flex;flex-direction:column}
.cltl-sg:last-child{border-bottom:none}
.cltl-sg-label{font-size:10px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;flex-shrink:0}
.cltl-sg-head{display:grid;grid-template-columns:35% 50% 15%;font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.3px;padding-bottom:4px;border-bottom:1px solid rgba(64,64,64,.5);margin-bottom:3px;flex-shrink:0}
.cltl-sg-head span:nth-child(2),.cltl-sg-head span:nth-child(3){text-align:right}
.cltl-sr{display:grid;grid-template-columns:35% 50% 15%;padding:4px 0;border-bottom:1px solid rgba(64,64,64,.22);align-items:center}
.cltl-sr:last-child{border-bottom:none}
.csn{font-size:11px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.csp{font-size:11px;font-weight:600;text-align:right;white-space:nowrap}
.csw{font-size:10px;color:var(--text3);text-align:right;white-space:nowrap}
/* Cột phải: grid 3 hàng — biểu đồ đường nằm TRONG cột phải */
.cltl-charts{display:grid;grid-template-rows:auto auto auto;gap:12px;width:100%;min-width:0;overflow:hidden}
.cltl-row-top{display:grid;grid-template-columns:3fr 2fr;gap:12px}
.cltl-row-mid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.cltl-row-bot{min-width:0;overflow:hidden}
/* Responsive breakpoints */
@media(max-width:1100px){
  .cltl-root{grid-template-columns:200px 1fr}
  .cltl-row-top{grid-template-columns:1fr 1fr}
  .cltl-row-mid{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .cltl-root{grid-template-columns:1fr}
  .cltl-sidebar{flex-direction:row;flex-wrap:wrap;border-radius:12px}
  .cltl-sg{flex:1 1 45%;border-bottom:none;border-right:1px solid var(--border)}
  .cltl-row-top,.cltl-row-mid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .cltl-sidebar{flex-direction:column}
  .cltl-sg{flex:none;border-right:none;border-bottom:1px solid var(--border)}
  .cltl-row-top,.cltl-row-mid{grid-template-columns:1fr}
}
/* MARKET ANALYSIS */
/* REPORT MODAL */
/* ===== RESPONSIVE: narrow screens (MacBook 13", laptop scale cao) ===== */
@media (max-width: 1366px){
  .grid-stats-main{grid-template-columns:1fr 1.3fr 1.3fr}
  .mchip-grid-4{grid-template-columns:repeat(2,1fr)}
  .sg-cols-5{grid-template-columns:repeat(3,1fr)}
  .grid-heatmap-list{grid-template-columns:1.4fr 1fr}
  .kpi-row{grid-template-columns:repeat(3,1fr) !important}
  .grid-3e{grid-template-columns:repeat(3,1fr) !important}
  .grid-3{grid-template-columns:1fr 1fr !important}
}
@media (max-width: 1100px){
  .grid-stats-main{grid-template-columns:1fr}
  .grid-stats-main>*{grid-column:auto !important;grid-row:auto !important} /* bỏ hết vị trí cố định dành riêng cho layout 3 cột máy tính, tránh chồng lấn khi về 1 cột */
  .sg-cols-5{grid-template-columns:repeat(2,1fr)}
  .grid-heatmap-list{grid-template-columns:1fr}
  .kpi-row{grid-template-columns:repeat(2,1fr) !important}
}

/* ===== MOBILE / TABLET RESPONSIVE ===== */
.mob-hamburger{display:none;position:fixed;top:12px;left:12px;z-index:210;width:42px;height:42px;border-radius:10px;background:var(--bg2);border:1px solid var(--border);color:var(--text);font-size:20px;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.3);cursor:pointer}
.mob-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:199;opacity:0;transition:opacity .2s ease;pointer-events:none}
.mob-backdrop.show{opacity:1;pointer-events:auto}

@media (max-width: 900px){
  body{overflow:auto;overflow-x:hidden;height:auto;min-height:100vh} /* overflow-x:hidden = phòng vệ cuối cùng, chặn TOÀN TRANG bị cuộn ngang dù có lỡ sót lỗi tràn ở đâu đó chưa phát hiện ra */
  .mob-hamburger{display:flex;z-index:10000} /* cao hơn mọi banner (z-index 9999) -> luôn bấm được */
  .mob-backdrop{display:block}
  .sidebar{
    position:fixed !important;top:0;left:0;height:100vh;z-index:200;
    width:260px !important;
    transform:translateX(-100%);
    transition:transform .25s ease;
    box-shadow:4px 0 24px rgba(0,0,0,.4);
  }
  .sidebar.mob-open{transform:translateX(0)}
  .sidebar .sb-toggle{display:none}
  /* Trên di động, sidebar là dạng menu trượt ra — LUÔN hiện đầy đủ chữ, bỏ qua trạng thái
     "thu gọn chỉ icon" (vốn chỉ dành cho máy tính, có thể còn lưu lại từ lần dùng trước) */
  .sidebar.collapsed .nav-item{justify-content:flex-start !important;padding:10px 20px !important;gap:10px !important;font-size:13px !important}
  .sidebar.collapsed .nav-section,.sidebar.collapsed .acc-badge-detail{display:block !important}
  .sidebar.collapsed .sidebar-bottom{display:block !important}

  /* ===== Lịch Heatmap: tự co vừa màn hình điện thoại ===== */
  .cal-wrap{overflow-x:hidden !important}
  .cal-grid{
    grid-template-columns:20px repeat(7,1fr) !important;
    min-width:0 !important;
    gap:2px !important;
    width:100% !important;
  }
  .cal-cell{
    min-height:0 !important;
    height:auto !important;
    aspect-ratio:1/1 !important;
    padding:3px 4px !important;
    border-radius:4px !important;
    font-size:0 !important; /* ẩn text damt/dcnt, chỉ giữ dnum */
  }
  .cal-cell .dnum{font-size:9px !important;font-weight:700 !important}
  .cal-cell .damt{display:none !important}
  .cal-cell .dcnt{display:none !important}
  .cal-hd{font-size:8px !important;padding:2px 0 !important;text-align:center !important}
  .cal-wk{font-size:8px !important;width:20px !important}
  .main{margin-left:0 !important;padding-top:64px}
  body.has-top-banner .main{padding-top:112px} /* chừa thêm chỗ khi có banner cảnh báo hiện phía trên */
  .ph{flex-wrap:wrap;gap:10px;padding-left:50px} /* chừa chỗ bên trái cho nút hamburger cố định, tránh che chữ đầu tiêu đề */
  .ph .pt{font-size:19px}
  .ph-filters{flex-wrap:wrap !important;width:100%} /* QUAN TRỌNG: khối 3 ô lọc + 2 nút vốn không được xuống dòng, tràn ngang kéo cả trang bị cuộn ngang. Thêm flex-wrap để tự xuống dòng khi không đủ chỗ. */
  #page-dashboard .ph-filters{display:grid !important;grid-template-columns:repeat(3,1fr);gap:6px} /* Riêng Dashboard: đúng 3 ô lọc, không có nút nào khác đi kèm -> ép lưới 3 cột cố định thay vì flex dễ tràn dòng khi min-width cộng dồn vượt quá bề ngang màn hình hẹp */
  #page-dashboard .ph-filters .fs{min-width:0;font-size:10.5px;padding:8px 4px} /* bỏ min-width cứng trong lưới 3 cột, để mỗi ô tự co theo đúng 1/3 bề ngang; giảm cỡ chữ/padding cho vừa khít */
  .fs{flex:1 1 auto;min-width:104px;font-size:12px;padding:8px 6px} /* 3 ô lọc: đủ rộng để đọc được chữ, tự chia đều hàng ngang */
  #dash-add-btn{display:none} /* Trên di động đã có nút "+" nổi thay thế, ẩn bớt để tiêu đề đỡ chật */
  #dash-pdf-btn{font-size:12px !important;padding:8px 14px !important} /* Nút Xuất PDF quá to trên di động, thu gọn lại đỡ chiếm nửa màn hình */
  /* Rút gọn KPI chính trên di động: chỉ giữ 4 thẻ quan trọng nhất (Net Profit, Profit Factor,
     Max Drawdown, Kỳ vọng TB mỗi lệnh) — tham khảo cách TradeZella hiện gọn 2 cột trên mobile.
     Sharpe-like Ratio và Recovery Factor vẫn đầy đủ trên máy tính, chỉ ẩn ở màn hình nhỏ. */
  #dash-kpi-main{grid-template-columns:repeat(2,1fr) !important}
  #dash-kpi-main .kpi:nth-child(2),#dash-kpi-main .kpi:nth-child(5){display:none}
  .grid-3,.grid-3e,.grid-2,.grid-stats-main{grid-template-columns:1fr !important}
  /* sg-cols-5 ở 600px: bỏ repeat(2,1fr) — khối dash-stats-5col cần 1 cột riêng, xử lý bằng ID phía dưới */
  .kpi-row{grid-template-columns:repeat(2,1fr) !important}
  .lot-row{grid-template-columns:1fr !important}
  button,.btn,.nav-item,input,select,textarea{min-height:40px}
  .aic-btn-row{grid-template-columns:1fr !important}

  /* ===== Banner cảnh báo hết hạn/sắp hết hạn — co giãn cho điện thoại ===== */
  /* Không ép display ở đây — JS đã tự quyết định 'flex' (hiện) hay 'none' (ẩn) */
  #expiring-soon-banner,#expired-banner{
    flex-wrap:wrap;align-items:center;justify-content:center;
    gap:6px;padding:8px 10px 8px 58px; /* chừa khoảng trống bên trái cho nút hamburger */
    font-size:11.5px;line-height:1.4;text-align:center;
  }
  #expiring-soon-banner a,#expired-banner a,#expired-banner button{
    font-size:11px;padding:4px 10px;white-space:nowrap;
  }
  #recheck-expiry-msg{width:100%;font-size:10.5px}
  /* Toast đồng bộ thiết bị khác (góc dưới phải) — thu nhỏ lại trên di động */
  #remote-update-banner{right:10px;left:10px;bottom:88px;max-width:none;font-size:12px}
  #new-version-banner{right:10px;left:10px;bottom:150px;max-width:none;font-size:12px}
  #fab-add-trade{width:50px;height:50px;font-size:24px;bottom:16px;right:16px}
}

@media (max-width: 600px){
  body{font-size:13px}
  .sidebar{width:85vw !important;max-width:300px}
  .main{padding:12px !important}
  .panel{padding:14px !important}
  .pt{font-size:17px !important}
  .kpi-row{grid-template-columns:repeat(2,1fr) !important}
  /* KHỐI 5 CHỈ SỐ DASHBOARD — ép 1 cột dọc trên di động.
  .win-gauge-nums{flex-wrap:wrap}
  /* Trades table -> stacked cards */
  #trades-table thead{display:none}
  #trades-table, #trades-table tbody, #trades-table tr, #trades-table td{display:block;width:100%}
  #trades-table tr{margin-bottom:12px;border:1px solid var(--border);border-radius:10px;padding:10px;background:var(--bg2)}
  #trades-table td{border:none;padding:6px 4px;text-align:right !important;display:flex;justify-content:space-between;align-items:center}
  #trades-table td::before{content:attr(data-label);font-size:11px;color:var(--text3);font-weight:600;text-align:left}
  #trades-table td .ra{justify-content:flex-end}
}

.an-form{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:18px 20px;margin-bottom:16px}
.an-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:12px}
.an-row .fg-g{margin-bottom:0}
.an-preview{margin-top:10px;border-radius:8px;overflow:hidden;background:var(--bg3);max-height:280px;display:flex;align-items:center;justify-content:center}
.an-preview img{max-width:100%;max-height:280px;object-fit:contain;display:block}
.an-preview-msg{color:var(--text3);font-size:12px;padding:16px}
.an-day-group{margin-bottom:20px}
.an-day-header{font-size:12px;font-weight:700;color:var(--text3);letter-spacing:.6px;text-transform:uppercase;padding:6px 0;border-bottom:1px solid var(--border);margin-bottom:10px}
.an-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:14px 16px;margin-bottom:8px;display:flex;gap:14px;align-items:flex-start}
.an-chart-thumb{width:140px;height:80px;border-radius:6px;overflow:hidden;flex-shrink:0;cursor:pointer;background:var(--bg3);position:relative}
.an-chart-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .2s}
.an-chart-thumb:hover img{opacity:.8}
.an-chart-thumb .an-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;opacity:0;transition:opacity .2s;background:rgba(0,0,0,.3)}
.an-chart-thumb:hover .an-play{opacity:1}
.an-chart-err{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:10px;text-align:center;padding:6px}
.an-body{flex:1;min-width:0}
.an-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:6px}
.an-sym{font-size:14px;font-weight:800;color:var(--text)}
.an-tf{font-size:11px;padding:2px 8px;border-radius:4px;background:rgba(1,196,139,.12);color:var(--accent);font-weight:700}
.an-dir{font-size:11px;padding:2px 8px;border-radius:4px;font-weight:700}
.an-dir.bull{background:rgba(1,196,139,.15);color:var(--accent)}
.an-dir.bear{background:rgba(254,55,95,.15);color:var(--red)}
.an-dir.neu{background:var(--bg3);color:var(--text3)}
.an-time{font-size:11px;color:var(--text3)}
.an-note{font-size:13px;color:var(--text2);line-height:1.65;white-space:pre-wrap}
.an-actions{display:flex;gap:6px;margin-top:8px}
.an-lb{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:1000;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:16px}
.an-lb img{max-width:92vw;max-height:80vh;border-radius:8px;object-fit:contain}
.an-lb-info{margin-top:12px;text-align:center;color:#fff;font-size:13px}
.an-lb-close{position:absolute;top:14px;right:18px;font-size:28px;color:#fff;cursor:pointer;background:none;border:none;line-height:1}
.an-lb a{color:var(--accent);text-decoration:none;font-size:12px}
/* TRADE EVALUATION */
.eval-section{margin:14px 0 6px;padding:10px 0 4px;border-top:1px solid var(--border)}
.eval-section-title{font-size:11px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.eval-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.eval-chip{padding:5px 11px;border-radius:20px;font-size:11.5px;font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--bg3);color:var(--text2);transition:all .12s;user-select:none}
.eval-chip:hover{border-color:var(--accent);color:var(--accent)}
.eval-chip.sel-ok{background:rgba(1,196,139,.18);border-color:var(--accent);color:var(--accent)}
.eval-chip.sel-warn{background:rgba(245,158,11,.18);border-color:var(--yellow);color:var(--yellow)}
.eval-chip.sel-bad{background:rgba(254,55,95,.18);border-color:var(--red);color:var(--red)}
.err-group{margin:8px 0}
.err-group-title{font-size:11px;font-weight:700;margin-bottom:5px;display:flex;align-items:center;gap:5px}
.err-level-1{color:#60a5fa}
.err-level-2{color:var(--yellow)}
.err-level-3{color:var(--red)}
/* TRADING PLAYBOOK */
.pb-section{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:20px 22px;margin-bottom:16px}
.pb-section-h{font-size:13px;font-weight:700;color:var(--accent);margin-bottom:14px;display:flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.5px}
.pb-principle{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.pb-principle:last-child{border-bottom:none}
.pb-principle-num{width:28px;height:28px;border-radius:50%;background:rgba(1,196,139,.15);color:var(--accent);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pb-principle-body{flex:1}
.pb-principle-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:3px}
.pb-principle-desc{font-size:12px;color:var(--text2);line-height:1.6}
.pb-philosophy{font-size:13px;color:var(--text2);line-height:1.8;border-left:3px solid var(--accent);padding-left:14px;font-style:italic}
.pb-setup-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-top:4px}
.pb-setup-card{background:var(--bg3);border:1px solid var(--border);border-radius:8px;overflow:hidden;cursor:pointer;transition:border-color .15s}
.pb-setup-card:hover{border-color:var(--accent)}
.pb-setup-img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--bg);display:block}
.pb-setup-img-placeholder{width:100%;aspect-ratio:16/9;background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:28px}
.pb-setup-info{padding:10px 12px}
.pb-setup-name{font-size:13px;font-weight:700;color:var(--text);margin-bottom:2px}
.pb-setup-desc{font-size:11px;color:var(--text3);line-height:1.5}
.pb-setup-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.pb-setup-tag{font-size:10px;padding:2px 7px;border-radius:4px;background:rgba(1,196,139,.12);color:var(--accent);font-weight:600}
.pb-add-btn{border:2px dashed var(--border);border-radius:8px;aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text3);cursor:pointer;transition:all .15s;background:none;width:100%}
.pb-add-btn:hover{border-color:var(--accent);color:var(--accent)}
.pb-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}
.pb-lightbox img{max-width:90vw;max-height:85vh;border-radius:8px;object-fit:contain}
.pb-lightbox-close{position:absolute;top:16px;right:20px;font-size:28px;color:#fff;cursor:pointer;background:none;border:none}
.pb-textarea{width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:13px;padding:10px 12px;resize:vertical;min-height:90px;font-family:inherit;line-height:1.7}
.pb-textarea:focus{outline:none;border-color:var(--accent)}
/* READINESS CHECKLIST */
.rd-sec{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:18px 20px;margin-bottom:14px}
.rd-sec-h{font-size:13px;font-weight:700;color:var(--text);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.rd-sec-h .tag{font-size:10px;font-weight:700;padding:2px 8px;border-radius:4px;text-transform:uppercase}
.rd-sec-h .tag.auto{background:rgba(56,189,248,.15);color:#38bdf8}
.rd-sec-h .tag.killer{background:rgba(254,55,95,.15);color:var(--red)}
.rd-q{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);gap:14px;flex-wrap:wrap}
.rd-q:last-child{border-bottom:none}
.rd-q-label{font-size:13px;color:var(--text2);flex:1;min-width:200px}
.rd-opts{display:flex;gap:6px;flex-shrink:0}
.rd-opt{padding:6px 14px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--bg3);color:var(--text2);transition:all .15s}
.rd-opt:hover{border-color:var(--accent)}
.rd-opt.sel-good{background:rgba(1,196,139,.2);border-color:var(--accent);color:var(--accent)}
.rd-opt.sel-bad{background:rgba(254,55,95,.2);border-color:var(--red);color:var(--red)}
.rd-opt.sel-neutral{background:rgba(245,158,11,.2);border-color:var(--yellow);color:var(--yellow)}
.rd-auto-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px}
.rd-auto-row:last-child{border-bottom:none}
.rd-auto-val{font-weight:700}
.rd-result{border-radius:12px;padding:24px;text-align:center;margin-bottom:16px}
.rd-result.green{background:rgba(1,196,139,.12);border:1px solid rgba(1,196,139,.3)}
.rd-result.yellow{background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.3)}
.rd-result.red{background:rgba(254,55,95,.12);border:1px solid rgba(254,55,95,.3)}
.rd-result-icon{font-size:40px;margin-bottom:8px}
.rd-result-title{font-size:20px;font-weight:800;margin-bottom:6px}
.rd-result-sub{font-size:13px;color:var(--text2)}
.rd-flag-list{text-align:left;max-width:480px;margin:14px auto 0;font-size:12.5px}
.rd-flag-list div{padding:4px 0}
/* GUIDE / EXPLAIN PAGE */
.gd-banner{background:linear-gradient(135deg,rgba(1,196,139,.12),rgba(254,55,95,.08));border:1px solid var(--border);border-radius:var(--r);padding:22px 26px;margin-bottom:24px}
.gd-banner h1{font-size:20px;font-weight:800;margin-bottom:10px}
.gd-banner p{font-size:13px;color:var(--text2);line-height:1.7;margin-bottom:6px}
.gd-banner a{color:var(--accent);text-decoration:none;font-weight:600}
.gd-banner a:hover{text-decoration:underline}
.gd-sec{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:20px 24px;margin-bottom:16px}
.gd-h{font-size:15px;font-weight:800;color:var(--accent);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.gd-h .num{background:var(--accent);color:#04231a;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.gd-p{font-size:13px;color:var(--text2);line-height:1.8;margin-bottom:8px}
.gd-formula{background:var(--bg3);border-left:3px solid var(--accent);border-radius:6px;padding:10px 14px;font-size:13px;font-weight:600;margin:10px 0}
.gd-table{width:100%;font-size:12.5px;margin:10px 0}
.gd-table td{padding:6px 10px;border-bottom:1px solid var(--border)}
.gd-table tr:last-child td{border-bottom:none}
.gd-badge{display:inline-block;padding:2px 10px;border-radius:5px;font-size:11px;font-weight:700}
.gd-badge.red{background:rgba(254,55,95,.15);color:var(--red)}
.gd-badge.yellow{background:rgba(245,158,11,.15);color:var(--yellow)}
.gd-badge.green{background:rgba(1,196,139,.15);color:var(--accent)}
.gd-badge.blue{background:rgba(14,165,233,.15);color:#38bdf8}
.gd-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.gd-list{margin:8px 0 8px 18px;font-size:13px;color:var(--text2);line-height:1.9}
.gd-italic{font-style:italic;color:var(--text2);font-size:13px}