.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);
  border-radius:16px;
  border:1px solid var(--border);
  box-shadow:0 20px 50px rgba(15,23,42,.15);
  overflow:hidden;
}

.t2c-editor *{ box-sizing:border-box; }

/* LAYOUT */
.t2c-wrap{
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  min-height:600px;
}

@media (max-width:900px){
  .t2c-wrap{
    grid-template-columns:1fr;
  }
}

/* SIDEBAR */
.t2c-aside{
  background:var(--panel);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:16px;
  border-right:1px solid var(--border);
}

@media (max-width:900px){
  .t2c-aside{
    border-right:none;
    border-bottom:1px solid var(--border);
  }
}

.t2c-panel-section p{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin:0 0 8px;
  color:var(--muted);
  font-weight: 500;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

.t2c-panel-section p.t2c-muted{
	text-transform: none;
    font-weight: normal;
    border: none;
    padding: 0;
}

/* BUTTONS */
.t2c-btn{
  font:500 14px system-ui,sans-serif;
  padding:6px 10px;
  border-radius:8px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
  transition:.15s;
}

.t2c-btn:hover{
  border-color:var(--accent);
  background:#eff6ff;
}

.t2c-btn.active{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}

.t2c-btn-sm{
  padding:4px 8px;
  font-size:12px;
}

/* TOOL GRID */
.t2c-tools{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}

/* ROW */
.t2c-row{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.t2c-row label{
  font-size:13px;
}

.t2c-muted{
  font-size:12px;
  color:var(--muted);
}

/* PALETTE */
.t2c-palette{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:6px;
  margin-top:8px;
}

.t2c-swatch{
  width:24px;
  height:24px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.15);
  cursor:pointer;
}

/* MAIN */
.t2c-main{
  padding:16px;
  background:#f9fafb;
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow:auto;
}

/* TOP BAR */
.t2c-topbar{
  display:flex;
  gap:6px;
  align-items:center;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:8px;
}

.t2c-topbar-right{
  margin-left:auto;
  display:flex;
  gap:6px;
}

/* CANVAS */
.t2c-canvas-wrap{
  background:#fff;
  border-radius:16px;
  border:1px solid var(--border);
  height:520px;
  max-height:70vh;
  overflow:auto;
  padding:12px;
}

#canvas{
  display:block;
  margin:0 auto;
  max-width:none !important;
  max-height:none !important;
  background:#fff;
  border-radius:12px;
  box-shadow:0 20px 50px rgba(0,0,0,.18);
}

/* STATUS */
.t2c-status{
  font-size:13px;
  color:var(--muted);
}

/* HISTORY */
.t2c-history-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:6px;
}

.t2c-history-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
  gap:8px;
}

.t2c-history-item{
  background:#fff;
  border:1px solid var(--border);
  border-radius:10px;
  padding:6px;
align-items: center;
    position: relative;
    width: 100%;
    height: 110px;
}

.t2c-history-thumb img{
  max-width: 100%;
    max-height: 100%;
    display: block;
}
/* ===== BUTTON FIX ===== */
.t2c-btn{
  background:#f8fafc;              /* xám rất nhẹ */
  color:#111827;                   /* chữ đậm */
  border:1px solid #d1d5db;
  text-decoration:none !important;
}

.t2c-btn:hover{
  background:#e5e7eb;
  border-color:#9ca3af;
  text-decoration:none;
}

/* nút đang active (Fill / Brush / Eraser) */
.t2c-btn.active{
  background:#2563eb;              /* xanh primary */
  color:#ffffff;
  border-color:#2563eb;
  text-decoration:none;
}
/* ===== COLORS SECTION FIX ===== */

/* =========================
   COLORS – POLISHED UI
========================= */

/* Custom color card */
.t2c-color-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
}

/* color input – dạng swatch lớn */
.t2c-color-card input[type="color"]{
  width:44px;
  height:44px;
  border:none;
  padding:0;
  background:none;
  cursor:pointer;
  border-radius: 50%;
}

.t2c-color-card input[type="color"]::-webkit-color-swatch-wrapper{
  padding:0;
}
.t2c-color-card input[type="color"]::-webkit-color-swatch{
  border-radius:12px;
  border:1px solid rgba(0,0,0,.15);
}

/* meta text */
.t2c-color-meta{
  display:flex;
  flex-direction:column;
  line-height:1.2;
}

.t2c-color-name{
  font-size:14px;
  font-weight:600;
}

.t2c-color-hex{
  font-size:12px;
  color:var(--muted);
}

/* ===== Palette grid ===== */

.t2c-palette{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:10px;
  padding:4px 2px;
}

/* swatch */
.t2c-swatch{
  aspect-ratio:1 / 1;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
  font-size: 1.3rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
}

/* hover */
.t2c-swatch:hover{
  transform:scale(1.12);
}

/* active color */
.t2c-swatch.active{
  box-shadow:
    0 0 0 2px #ffffff,
    0 0 0 3px #eee;
}
.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;
	position: absolute;
    top: 4px;
	padding: 0;
	color:#fff;
}
.t2c-history-download {
    right: 35px;
    background: #56a7e5;
}
.t2c-history-delete {
    right: 4px;
    background: #fd5151;
}
 .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-history-thumb {
    cursor: pointer;
    width: 100%;
    height: 100%;
}
.t2c-topbar .t2c-btn{
    display: flex;
    align-content: center;
    align-items: center;
    gap: 5px;
    height: 28px;
}
@media (max-width: 900px){
	.t2c-aside{gap:5px}
	.t2c-palette{
		height: 70px;
		overflow: auto;
	}
	.t2c-panel-section h2{display:none}
}
@media (max-width: 600px){
	.t2c-panel-section .t2c-row:nth-child(2){display:none}
	.t2c-color-card{padding:0}
	.t2c-topbar{flex-wrap: wrap;}
	#undoBtn,#redoBtn,#clearBtn,#downloadBtn,#saveServerBtn{font-size:0}
	.t2c-topbar .t2c-btn{gap:0}
}