.t2c-editor {
    --bg:#f3f4f6;
    --panel:#ffffff;
    --text:#111827;
    --accent:#2563eb;
    --border:#e5e7eb;
    --muted:#6b7280;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    background: var(--bg);
    padding: 0;
    margin: 0;
    border-radius: 12px;
	border: 1px solid #e5e7eb;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(15,23,42,0.12);
  }
  .t2c-editor * { box-sizing:border-box; }

  .t2c-wrap {
    display:grid;
    grid-template-columns:280px minmax(0,1fr);
    min-height: 520px;
  }
  @media (max-width:900px){
    .t2c-wrap{
      grid-template-columns:1fr;
      grid-template-rows:auto auto;
    }
  }

  .t2c-aside{
    background:var(--panel);
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  @media (max-width:900px){
    .t2c-aside{
      border-right:none;
      border-bottom:1px solid var(--border);
    }
  }

  .t2c-main{
    padding:16px;
    background:#f9fafb;
  }

  .t2c-aside h1{
    font-size:16px;
    margin:0 0 8px;
    font-weight:600;
  }
  .t2c-muted{
    color:var(--muted);
    font-size:13px;
  }

  .t2c-tools{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
  }
  .t2c-btn{
    font:500 14px system-ui, sans-serif;
    padding:6px 8px;
    border-radius:8px;
    border:1px solid var(--border);
    background:#ffffff;
    color:var(--text);
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    white-space:nowrap;
    transition:background 0.15s, border-color 0.15s, transform 0.05s;
  }
  .t2c-btn:hover{
    border-color:var(--accent);
    background:#eff6ff;
  }
  .t2c-btn:active{
    transform:scale(0.97);
  }
  .t2c-btn.active{
    border-color:var(--accent);
    background:#2563eb;
    color:#ffffff;
  }
  .t2c-btn-secondary{
    background:#f9fafb;
  }
  .t2c-btn-sm{
    padding:4px 8px;
    font-size:12px;
  }

  .t2c-row{
    display:flex;
    gap:8px;
    align-items:center;
    margin-top:8px;
    flex-wrap:wrap;
  }
  .t2c-row label{
    font-size:13px;
  }
  .t2c-row input[type="range"]{
    flex:1;
  }
  .t2c-row input[type="checkbox"]{
    margin-right:4px;
  }

  .t2c-palette{
    display:grid;
    grid-template-columns:repeat(8,1fr);
    gap:4px;
    margin-top:4px;
  }
  .t2c-swatch{
    width:22px;
    height:22px;
    border-radius:999px;
    border:1px solid rgba(15,23,42,0.18);
    cursor:pointer;
  }

  .t2c-topbar{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:8px;
  }

  .t2c-canvas-wrap{
    background:#ffffff;
    border-radius:12px;
    border:1px solid var(--border);
    padding:8px;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    overflow:auto;            /* cho phép scroll/pan */
    height:520px;             /* khung tô màu cố định */
    max-height:70vh;
  }
  #canvas{
    display:block;
    max-width:100%;
    height:auto;
    background:#ffffff;
    border-radius:8px;
  }

  .t2c-status{
    margin-top:6px;
    font-size:13px;
    color:var(--muted);
  }

  .t2c-panel-section{
    margin-top:16px;
    padding-top:12px;
    border-top:1px solid var(--border);
  }
  .t2c-panel-section h2{
    font-size:16px;
    margin:0 0 6px;
    font-weight:600;
  }

  .t2c-file-input{
    display:flex;
    flex-direction:column;
    gap:6px;
  }

  .t2c-history-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
  }

  .t2c-history-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
    gap:8px;
    margin-top:6px;
  }
  .t2c-history-item{
    background:#ffffff;
    border:1px solid var(--border);
    border-radius:10px;
    padding:6px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    gap:4px;
    align-items:center;
  }
  .t2c-history-thumb{
    border-radius:8px;
    overflow:hidden;
    background:#f3f4f6;
    display:grid;
    place-items:center;
    cursor:pointer;
  }
  .t2c-history-thumb img{
    width:100%;
    height:70px;
    object-fit:contain;
  }
  .t2c-history-download,
  .t2c-history-delete{
    border:none;
    background:#f9fafb;
    border-radius:999px;
    width:28px;
    height:28px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:16px;
    color:#6b7280;
    transition:background 0.15s, color 0.15s;
  }
  .t2c-history-download:hover{
    background:#e0f2fe;
    color:#2563eb;
  }
  .t2c-history-delete:hover{
    background:#fee2e2;
    color:#b91c1c;
  }
  .t2c-history-empty{
    font-size:13px;
    color:var(--muted);
  }

  .t2c-input-small{
    font-size:13px;
    padding:4px 8px;
    border-radius:6px;
    border:1px solid var(--border);
    background:#ffffff;
    color:var(--text);
  }
  #eyedropperBtn{
    display:none !important;
  }