/* Visual pelajaran Belajar (js/learn-visuals.js). Gaya dihadkan dalam .lv sahaja. */
.lv { margin: 4px 0 14px; padding: 12px 10px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.lv svg { display: block; width: 100%; height: auto; max-width: 480px; margin: 0 auto; overflow: visible; font-family: var(--font); }
.lv figcaption { margin-top: 8px; font-size: 0.84rem; line-height: 1.45; color: var(--muted); text-align: center; }
.lv text { font-size: 11px; fill: var(--text); }
.lv .sm { font-size: 10px; }
.lv .mu { font-size: 10px; fill: var(--muted); }
.lv .h { font-weight: 600; }
.lv .big { font-size: 17px; font-weight: 700; }
.lv .inv { fill: var(--brand-ink); }
.lv .mu-inv { font-size: 10px; fill: var(--brand-ink); opacity: .8; }
.lv .bx { fill: var(--surface); stroke: var(--border); }
.lv .ln { stroke: var(--border); }
.lv .dash { stroke-dasharray: 4 3; }
.lv .w2 { stroke-width: 2; }
.lv polyline, .lv line, .lv path { stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.lv polyline.w2, .lv line.w2 { stroke-width: 2.2; }
.lv .o1 { fill-opacity: .1; } .lv .o2 { fill-opacity: .2; } .lv .o3 { fill-opacity: .3; } .lv .o4 { fill-opacity: .4; }
.lv .o5 { fill-opacity: .5; } .lv .o6 { fill-opacity: .65; }
.lv .f-b { fill: var(--brand); } .lv .f-bs { fill: var(--brand-soft); } .lv .f-u { fill: var(--up); } .lv .f-d { fill: var(--down); }
.lv .f-g { fill: var(--gold); } .lv .f-i { fill: var(--info); } .lv .f-p { fill: var(--purple); } .lv .f-w { fill: var(--warn); }
.lv .f-mu { fill: var(--muted); } .lv .f-s1 { fill: var(--surface); } .lv .f-s2 { fill: var(--border); }
.lv .s-b { stroke: var(--brand); } .lv .s-u { stroke: var(--up); } .lv .s-d { stroke: var(--down); } .lv .s-g { stroke: var(--gold); }
.lv .s-i { stroke: var(--info); } .lv .s-p { stroke: var(--purple); } .lv .s-w { stroke: var(--warn); } .lv .s-mu { stroke: var(--muted); }
.lv .s-t { stroke: var(--text); } .lv .s-inv { stroke: var(--brand-ink); }
.lv .xs { font-size: 7.5px; }

/* Label hukum dan simulator leverage (modul Jenis dagangan & hukum) */
.hl { display: inline-block; padding: 2px 9px; margin: 0 4px 6px 0; border-radius: 999px; font-size: 0.76rem; font-weight: 600; line-height: 1.5; white-space: nowrap; border: 1px solid transparent; }
.hl-ok { color: var(--up); background: color-mix(in srgb, var(--up) 14%, transparent); border-color: color-mix(in srgb, var(--up) 35%, transparent); }
.hl-syarat { color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); border-color: color-mix(in srgb, var(--gold) 38%, transparent); }
.hl-khilaf { color: var(--purple); background: color-mix(in srgb, var(--purple) 13%, transparent); border-color: color-mix(in srgb, var(--purple) 35%, transparent); }
.hl-no { color: var(--down); background: color-mix(in srgb, var(--down) 13%, transparent); border-color: color-mix(in srgb, var(--down) 35%, transparent); }
.hl-na { color: var(--muted); background: var(--surface-2); border-color: var(--border); }
.hl-note { display: block; font-size: 0.72rem; color: var(--muted); line-height: 1.3; white-space: normal; }
.hl-matrix table { font-size: 0.86rem; }
.hl-matrix th, .hl-matrix td { white-space: normal; padding: 8px 8px; }
.hl-matrix td { min-width: 92px; }
.hl-matrix td .hl { margin: 0 0 2px; }
.hl-matrix td:first-child { min-width: 110px; }
.refs { padding-left: 1.3em; line-height: 1.5; }
.refs li { margin-bottom: 4px; }
.lev-sim { margin: 12px 0; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.lev-sim h4 { margin: 0 0 8px; }
.lev-sim input[type=range] { width: 100%; accent-color: var(--brand); }
.lev-bar { position: relative; height: 12px; margin: 6px 0 10px; border-radius: 6px; background: var(--border); overflow: hidden; }
.lev-bar::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--text); opacity: .5; }
.lev-bar span { display: block; height: 100%; border-radius: 6px; transition: width .15s; }
.lev-bar .u { background: var(--up); } .lev-bar .d { background: var(--warn); } .lev-bar .z { background: var(--down); }