:root{
  --coral:#FFA69E; --cream:#FAF3DD; --mint:#B8F2E6; --ice:#AED9E0; --slate:#5E6472;
  --bg:#FAF3DD; --text:#2b2f36; --muted:#7a808f; --card-bg:#fff; --shadow:0 10px 24px rgba(0,0,0,0.08);
}
html,body{height:100%;}
body{background:var(--bg); color:var(--text); font-family:Poppins, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;}

.sg-sidebar{position:fixed; inset:0 auto 0 0; width:250px; background:var(--slate); color:#fff; box-shadow:var(--shadow);}
.sg-sidebar .brand{padding:18px 16px; font-weight:600; letter-spacing:.2px; display:flex; align-items:center; gap:10px;}
.sg-sidebar .nav-link{color:#e9edf5; border-radius:10px; margin:4px 12px; padding:.6rem .9rem; display:flex; align-items:center; gap:10px;}
.sg-sidebar .nav-link.active,.sg-sidebar .nav-link:hover{background:rgba(255,255,255,.12); color:#fff;}

/* Consistent icon widths for alignment */
.ico{display:inline-block; width:1.25rem; text-align:center;}
.sg-sidebar .nav-link .bi{display:inline-block; width:1.25rem; text-align:center; margin-right:.35rem;}

.sg-content{margin-left:250px; padding:24px;}
.sg-card{background:var(--card-bg); border-radius:16px; box-shadow:var(--shadow); padding:18px; border:0;}
.metric{display:flex; align-items:center; gap:12px;}
.badge-coral{background:var(--coral);}
.btn-coral{background:var(--coral); border-color:var(--coral); color:#222; font-weight:600;}
.btn-mint{background:var(--mint); border-color:var(--mint); color:#222; font-weight:600;}
.btn-coral:hover{filter:brightness(.95);} .btn-mint:hover{filter:brightness(.95);} 

.heatmap-toggle{position:absolute; top:12px; right:12px;}
.heatmap-layer{mix-blend-mode:multiply; opacity:.65; transition:opacity .2s ease;}

.upload-drop{border:2px dashed var(--ice); border-radius:16px; padding:36px; text-align:center; background:#fff; transition:border-color .2s ease, background .2s ease;}
.upload-drop.drag{border-color:var(--coral); background:#fff7f5;}

.toast-container{position:fixed; right:16px; bottom:16px; z-index:1080;}

/* Breadcrumbs */
.breadcrumb{--bs-breadcrumb-divider: '›';}

/* Canvas labeler */
.labeler-wrap{position:relative; overflow:hidden; border-radius:12px; background:#000;}
canvas.labeler{display:block; width:100%; height:auto; cursor:crosshair;}
.labeler-toolbar{display:flex; gap:8px;}

/* Auth gradient */
.auth-bg{min-height:100vh; background:linear-gradient(135deg, var(--mint), var(--cream)); display:flex; align-items:center;}
.auth-card{max-width:420px; margin:auto;}

/* Micro interactions */
a, .btn{transition:all .15s ease;}

@media (max-width: 992px){
  .sg-sidebar{position:fixed; width:220px; transform:translateX(-100%); transition:transform .2s ease; z-index:1040;}
  .sg-sidebar.open{transform:none;}
  .sg-content{margin-left:0;}
}