:root{
  --brand-primary:#0d6efd;
  --brand-secondary:#5aa9ff;
  --bg:#ffffff;
  --text:#0b2545;
}
body{color:var(--text);} 
.hero-title{color:#0b2545}
.card{border-radius:12px;border:1px solid #e9eef5}
.btn-brand{background:var(--brand-primary);border-color:var(--brand-primary)}
.btn-brand:hover{background:#0b5ed7;border-color:#0a58ca}

.slide-canvas{position:relative;width:1280px;max-width:100%;aspect-ratio:16/9;border:1px solid #e6eef5;border-radius:12px;background:#fff;overflow:hidden}
.slide-stage{position:absolute;left:0;top:0;width:1280px;height:720px;transform-origin:top left}
.slide-img{position:absolute;object-fit:contain;border-radius:6px;box-shadow:0 2px 12px rgba(13,110,253,.12)}
.shape-box{position:absolute;background:rgba(255,255,255,.85);border:1px solid rgba(13,110,253,.25);border-radius:8px;padding:6px 8px;backdrop-filter:blur(3px)}
.shape-box h6{margin:0;font-size:14px;color:var(--text)}

.index-canvas{position:relative;width:1280px;max-width:100%;aspect-ratio:16/9;border:1px solid #e6eef5;border-radius:12px;background:linear-gradient(180deg,#ffffff,#f7faff)}
.index-stage{position:absolute;left:0;top:0;width:1280px;height:720px}
.triangle-img{position:absolute;left:0;top:0;width:1280px;height:720px;object-fit:cover;z-index:0;opacity:1}
.triangle-bg{position:absolute;left:160px;top:80px;width:960px;height:560px}
.triangle-bg svg{width:100%;height:100%}
.triangle-lines{position:absolute;left:0;top:0;width:1280px;height:720px;z-index:1}
.tri-line{stroke:#0d6efd;stroke-width:2;opacity:.35}
.tri-outline{fill:none;stroke:#0b5ed7;stroke-width:3;opacity:.6}
.tri-axis{stroke:#0d6efd;stroke-width:2.5;opacity:.7}
.tri-text{fill:#0b2545;font-size:14px;opacity:.8}
.tri-corner{fill:#0b2545;font-size:12px;opacity:.75}
.tri-na{fill:#95a5b3;font-size:16px;opacity:.85}
.index-number{position:absolute;display:flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--brand-primary),var(--brand-secondary));color:#fff;font-weight:700;text-decoration:none;box-shadow:0 6px 16px rgba(13,110,253,.25);transition:transform .15s ease, box-shadow .15s ease;z-index:2}
.index-number:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(13,110,253,.35)}
.index-number.small{width:70px;height:70px;font-size:14px;opacity:0}
.index-number.cat-transported{background:linear-gradient(135deg,#20c997,#2ecc71)}
.index-number.cat-amber{background:linear-gradient(135deg,#f59e0b,#fbbf24);opacity:0}
.index-number.cat-red {
    background: linear-gradient(135deg,#ef4444,#f87171);
    opacity: 0
}
.index-number.cat-neutral {
    background: linear-gradient(135deg,var(--brand-primary),var(--brand-secondary));
    opacity: 0
}
.index-number.small::after,
.index-number.cat-amber::after,
.index-number.cat-red::after,
.index-number.cat-neutral::after{
  content:"";
  position:absolute;
  left:-20px; top:-20px; width:calc(100% + 40px); height:calc(100% + 40px);
  border-radius:50%;
  background:transparent;
  pointer-events:auto;
}
.legend{position:absolute;right:24px;bottom:24px;background:#fff;border:1px solid #e9eef5;border-radius:10px;padding:8px 12px;box-shadow:0 8px 20px rgba(0,0,0,.06)}
.legend-item{display:flex;align-items:center;gap:8px;font-size:13px;color:#44556b;margin:4px 0}
.swatch{display:inline-block;width:14px;height:14px;border-radius:50%;box-shadow:0 0 0 2px #fff inset, 0 0 0 1px rgba(0,0,0,.08)}
.swatch-green{background:linear-gradient(135deg,#20c997,#2ecc71)}
.swatch-amber{background:linear-gradient(135deg,#f59e0b,#fbbf24)}
.swatch-red{background:linear-gradient(135deg,#ef4444,#f87171)}
.swatch-blue{background:linear-gradient(135deg,var(--brand-primary),var(--brand-secondary))}

/* Calibration panel */
.cal-toggle{position:absolute;right:16px;top:16px;z-index:3}
.cal-panel.hidden{display:none}
.cal-title{font-weight:600;color:#22324a;margin-bottom:6px}
.cal-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 0}
.cal-row label{font-size:12px;color:#5a6b82}
.cal-row input{width:100px}

.hidden{display:none}

/* Modal upload/preview */
.modal-overlay{position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(10,25,60,.35);display:flex;align-items:center;justify-content:center;padding:16px;z-index:1000}
.modal-dialog{width:min(720px,92vw);background:#fff;border:1px solid #e5ebf3;border-radius:12px;box-shadow:0 24px 60px rgba(10,25,60,.25);overflow:hidden}
.modal-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border-bottom:1px solid #eef3f8;background:#f9fbff}
.modal-body{padding:14px}
.preview-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin-top:8px}
.preview-item{border:1px solid #e9eef5;border-radius:8px;padding:8px;background:#fcfdff}