:root{
    --primary:#047857; /* emerald-700 */
    --primary-dark:#064e3b; /* emerald-900 */
    --border:#e3e7ef;
    --bg-start: #ecfdf5;
    --bg-end: #f8faf7;
    --text-main: #1f2937;
    --text-muted: #6b7280;
    --panel-bg: #ffffff;
    --drop-border: #c9d2ea;
    --drop-bg: #fafbff;
    --drop-drag-bg: #eef1ff;
    --canvas-grid-1: #eee;
    --canvas-grid-2: #fff;
    --ai-box-start: #fef3c7;
    --ai-box-end: #fef08a;
    --ai-box-border: #fde68a;
    --ai-box-text: #b45309;
    --badge-bg: #fef3c7;
  }
  [data-bs-theme="dark"] {
    --primary: #10b981;
    --primary-dark: #34d399;
    --border: #374151;
    --bg-start: #111827;
    --bg-end: #1f2937;
    --text-main: #f9fafb;
    --text-muted: #9ca3af;
    --panel-bg: #1f2937;
    --drop-border: #4b5563;
    --drop-bg: #374151;
    --drop-drag-bg: #4b5563;
    --canvas-grid-1: #374151;
    --canvas-grid-2: #1f2937;
    --ai-box-start: #451a03;
    --ai-box-end: #78350f;
    --ai-box-border: #92400e;
    --ai-box-text: #fde68a;
    --badge-bg: #451a03;
  }
  body{
    background:linear-gradient(180deg, var(--bg-start) 0%, var(--bg-end) 420px);
    color:var(--text-main);
  }
  .text-muted { color: var(--text-muted) !important; }
  .badge-soft{ background:var(--badge-bg); color:var(--ai-box-text); font-weight:600; }
  .tab-btn{ font-size:13.5px; white-space:nowrap; }
  .nav-pills .tab-btn.active{ background:var(--primary); color:#fff; }
  .nav-pills .tab-btn{ color:var(--text-main); background:var(--panel-bg); border:1px solid var(--border); }
  .btn-primary { background-color: var(--primary); border-color: var(--primary); color:#fff; }
  .btn-primary:hover { background-color: var(--primary-dark); border-color: var(--primary-dark); color:#fff; }
  .btn-outline-success { color: var(--primary); border-color: var(--primary); }
  .btn-outline-success:hover { background-color: var(--primary); color: #fff; }
  .panel{ display:none; background: var(--panel-bg); border: 1px solid var(--border) !important; }
  .panel.active{ display:block; }
  .drop{
    border:2px dashed var(--drop-border); cursor:pointer; color:var(--text-muted); background:var(--drop-bg); transition:.15s;
  }
  .drop.dragover{ border-color:var(--primary); background:var(--drop-drag-bg); }
  .drop strong{ color:var(--primary); }
  input[type=file]{ display:none; }
  .canvas-wrap{
    background:repeating-conic-gradient(var(--canvas-grid-1) 0% 25%, var(--canvas-grid-2) 0% 50%) 50% / 20px 20px;
    overflow:auto; max-height:520px;
    display:flex; align-items:center; justify-content:center;
  }
  canvas{ max-width:100%; height:auto; display:block; cursor:crosshair; }
  .ai-box{
    background:linear-gradient(135deg, var(--ai-box-start), var(--ai-box-end)); border:1px solid var(--ai-box-border);
    border-radius:12px; padding:14px;
  }
  .ai-box .ai-title{ font-weight:700; font-size:13px; color:var(--ai-box-text); }
  .btn-ai{ background:#d97706; color:#fff; }
  .btn-ai:hover{ background:#b45309; color:#fff; }
  .spinner{
    display:inline-block; width:12px; height:12px; border:2px solid var(--ai-box-border);
    border-top-color:#d97706; border-radius:50%; animation:spin .7s linear infinite; margin-right:6px;
  }
  @keyframes spin{ to{ transform:rotate(360deg); } }
  .ai-status{ font-size:12.5px; color:var(--text-muted); min-height:16px; }
  .swatch{ width:26px; height:26px; border-radius:6px; border:2px solid var(--panel-bg); box-shadow:0 0 0 1px var(--border); cursor:pointer; }
  textarea.code-area{ font-family:monospace; font-size:12.5px; min-height:120px; background:var(--panel-bg); color:var(--text-main); border:1px solid var(--border); }