:root {
      --ec: #2563EB;
    }

.ec-badge { font-size: 11px; color: white; padding: 4px 12px; letter-spacing: 0.1em; background: var(--ec); }
    .subtitle { font-size: 12px; color: var(--ink-light); font-weight: 300; letter-spacing: 0.1em; border-left: 2px solid var(--accent); padding-left: 10px; }
    .notice-caution { display: inline-block; margin-top: 8px; color: var(--ink-light); font-size: 12px; line-height: 1.7; }

    /* Drop Zone */

    /* Controls Bar */

    /* BG color picker (target color) */
    .color-wrap { display: flex; align-items: center; gap: 8px; }
    .color-swatch.auto-swatch { background: linear-gradient(135deg, #fff 0%, #eee 50%, #ccc 100%); }
    .auto-badge { font-size: 9px; color: var(--ec); border: 1px solid var(--ec); padding: 1px 6px; letter-spacing: 0.1em; }

    /* Sliders */
    .slider-wrap { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 160px; }
    .slider-num { font-size: 20px; color: var(--ink); min-width: 36px; text-align: right; line-height: 1; }

    /* Toggle */
    .toggle-row { display: flex; align-items: center; gap: 8px; }
    .toggle-label { font-size: 12px; color: var(--ink); font-weight: 300; cursor: pointer; }

    /* Output format */

    /* Workspace */
    .workspace { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--border); }
    .pane-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--bg); }
    .pane-header-left { display: flex; align-items: center; gap: 8px; }
    .pane-title { font-size: 10px; letter-spacing: 0.2em; color: var(--ink-light); text-transform: uppercase; }
    .pane-meta { font-size: 10px; color: var(--ink-light); }
    .pane-img-area { flex: 1; min-height: 300px; display: flex; align-items: center; justify-content: center; padding: 20px; background: repeating-conic-gradient(#E8EAED 0% 25%, #F8F9FA 0% 50%) 0 0 / 16px 16px; }
    .pane-img-area canvas, .pane-img-area img { max-width: 100%; max-height: 360px; object-fit: contain; display: block; box-shadow: 0 4px 20px rgba(0,0,0,0.12); }
    /* White bg area for "after" pane to show the white background clearly */
    .pane-img-area.white-bg { background: #CCCCCC; background-image: repeating-conic-gradient(#BBBBBB 0% 25%, #CCCCCC 0% 50%); background-size: 16px 16px; }

    .pane-footer { padding: 10px 16px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; background: var(--bg); }

    /* Info strip */
    .info-strip { display: flex; border: 1px solid var(--border); background: var(--card); overflow: hidden; }
    .info-val.detected-color { display: flex; align-items: center; gap: 8px; }
    .detected-chip { width: 14px; height: 14px; border: 1px solid rgba(0,0,0,0.15); flex-shrink: 0; }

    /* Progress */
    .progress-wrap { border: 1px solid var(--border); background: var(--card); padding: 16px 20px; }

    /* Result strip */
    .result-strip { display: flex; align-items: stretch; border: 1px solid var(--border); background: var(--card); }
    .result-big { padding: 18px 24px; background: var(--ec); color: white; display: flex; flex-direction: column; justify-content: center; gap: 2px; flex-shrink: 0; }
    .result-big-label { font-size: 9px; letter-spacing: 0.2em; color: rgba(255,255,255,0.55); text-transform: uppercase; }
    .result-big-num   { font-size: 34px; font-weight: 400; letter-spacing: -0.02em; line-height: 1; }
    .result-big-unit  { font-size: 10px; color: rgba(255,255,255,0.55); }
    .result-details { display: flex; flex: 1; flex-wrap: wrap; }
    .result-item { flex: 1; padding: 14px 18px; border-right: 1px solid var(--border); display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 100px; }
    .result-item:last-child { border-right: none; }
    .result-key { font-size: 9px; letter-spacing: 0.2em; color: var(--ink-light); text-transform: uppercase; }
    .result-val { font-size: 15px; color: var(--ink); }

    /* Mode toggle */
    .mode-toggle { display: flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; align-self: flex-start; }
    .mode-btn {
      font-size: 12px; font-weight: 500; padding: 8px 18px;
      border: none; background: transparent; color: var(--ink-light);
      cursor: pointer; transition: all 0.15s; border-right: 1px solid var(--border);
    }
    .mode-btn:last-child { border-right: none; }
    .mode-btn:hover { background: var(--blue-light); color: var(--blue); }
    .mode-btn.active { background: var(--blue); color: #fff; }

    /* Lasso editor */
    .lasso-editor {
      border: 1px solid var(--border); border-radius: 10px;
      background: var(--card); overflow: hidden;
    }
    .lasso-editor-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--bg);
    }
    .lasso-editor-title { font-size: 10px; font-weight: 600; letter-spacing: 0.18em; color: var(--ink-light); text-transform: uppercase; }
    .lasso-hint { font-size: 11px; color: var(--ink-xlight); }
    .lasso-canvas-wrap {
      display: flex; align-items: center; justify-content: center;
      padding: 16px; min-height: 300px;
      background: repeating-conic-gradient(#E8EAED 0% 25%, #F8F9FA 0% 50%) 0 0 / 16px 16px;
      cursor: crosshair; user-select: none; overflow: hidden;
    }
    #lassoCanvas { display: block; max-width: 100%; max-height: 480px; }
    .lasso-toolbar {
      padding: 10px 16px; border-top: 1px solid var(--border); background: var(--bg);
      display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    }
    .lasso-tool-btn {
      font-size: 11px; font-weight: 500; padding: 6px 14px;
      border: 1px solid var(--border); border-radius: 6px;
      background: transparent; color: var(--ink-light);
      cursor: pointer; transition: all 0.15s;
    }
    .lasso-tool-btn:hover { border-color: var(--blue); color: var(--blue); }
    .lasso-tool-btn.active { background: var(--blue); color: #fff; border-color: var(--blue); }
    .lasso-tool-btn.danger:hover { border-color: #EF4444; color: #EF4444; }
    .lasso-status { font-size: 11px; color: var(--ink-xlight); margin-left: auto; }
    .apply-btn:hover { background: var(--ec); }
    .apply-btn:active { transform: scale(0.98); }
    .apply-btn:disabled { opacity: 0.35; cursor: not-allowed; }
    .apply-btn:disabled:hover { background: var(--blue); }

    .is-applying .spinner { display: block; }
    .is-applying .btn-label { display: none; }
  
    /* ── Stable controls grid layout ── */
    #controlsBar {
      display: grid;
      grid-template-columns: minmax(240px, 1fr) minmax(280px, 1.4fr) minmax(180px, 0.8fr);
      align-items: stretch;
      overflow: visible;
      gap: 0;
    }
    #controlsBar .ctrl-section {
      min-width: 0;
      box-sizing: border-box;
      border-right: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }
    #controlsBar .ctrl-section:nth-child(3) {
      border-right: none;
    }
    #controlsBar .ctrl-section:nth-child(4) {
      grid-column: 1 / -1;
      border-right: none;
      border-bottom: none;
    }
    #controlsBar .color-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      flex-wrap: nowrap;
    }
    #controlsBar .color-hex {
      min-width: 72px;
      flex-shrink: 0;
    }
    #controlsBar .auto-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 56px;
      box-sizing: border-box;
      white-space: nowrap;
      flex-shrink: 0;
    }
    #controlsBar .slider-wrap {
      min-width: 0;
      width: 100%;
    }
    #controlsBar .toggle-row {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
    }
    #controlsBar .toggle-label {
      white-space: nowrap;
    }
    #controlsBar .fmt-row {
      display: flex;
      flex-wrap: nowrap;
      gap: 6px;
    }
    #controlsBar .fmt-row .fmt-btn {
      flex: 0 0 auto;
      min-width: 62px;
      white-space: nowrap;
    }
    @media (max-width: 1100px) {
      #controlsBar {
        grid-template-columns: 1fr 1fr;
      }
      #controlsBar .ctrl-section:nth-child(2) {
        border-right: none;
      }
      #controlsBar .ctrl-section:nth-child(3) {
        grid-column: 1 / -1;
        border-right: none;
      }
      #controlsBar .ctrl-section:nth-child(4) {
        grid-column: 1 / -1;
      }
    }
    @media (max-width: 760px) {
      #controlsBar {
        grid-template-columns: 1fr;
      }
      #controlsBar .ctrl-section {
        grid-column: 1 / -1;
        border-right: none;
      }
    }