/* css/style.css - modern, black-background UI */
.tti-app{
  display:flex;
  gap:24px;
  background:#0b0b0b;
  color:#eee;
  padding:18px;
  border-radius:12px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.6);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* left column */
.tti-left{
  flex:1 1 420px;
  min-width:280px;
}

.tti-right{
  flex:0 0 420px;
  min-width:260px;
}

.tti-title{
  font-size:20px;
  margin:0 0 12px 0;
  color:#fff;
  display:flex;
  align-items:center;
  gap:10px;
}

/* inputs */
.tti-row,
.tti-section{
  margin-bottom:12px;
}

.tti-row label,
.tti-section label{
  display:block;
  font-size:13px;
  margin-bottom:6px;
  color:#ccc;
}

#tti_top_text,
#tti_bottom_text,
#tti_width,
#tti_height,
#tti_top_font_size,
#tti_bottom_font_size,
#tti_top_font_family,
#tti_bottom_font_family{
  width:100%;
  box-sizing:border-box;
}

textarea#tti_top_text,
textarea#tti_bottom_text{
  width:100%;
  resize:vertical;
  padding:10px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.06);
  background: #0f0f0f;
  color:#fff;
  min-height:48px;
  font-size:15px;
}

/* inline size row */
.tti-size-row .tti-inline{
  display:flex;
  gap:8px;
  align-items:center;
}
.tti-size-row input[type="number"]{
  width:100px;
  padding:8px;
  border-radius:8px;
  background:#121212;
  color:#fff;
  border:1px solid rgba(255,255,255,0.05);
}

.tti-times{ color:#888; margin:0 6px; }

/* controls layout */
.tti-controls{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:8px;
}
.tti-control{ min-width:110px; flex:1 1 140px; }
.tti-control input[type="color"]{
  height:36px;
  width:48px;
  padding:0;
  border-radius:6px;
  border: none;
  background: none;
  cursor:pointer;
}

/* style toggle buttons */
.tti-style-buttons .tti-toggle{
  background:transparent;
  border:1px solid rgba(255,255,255,0.06);
  color:#ddd;
  padding:8px 10px;
  border-radius:8px;
  cursor:pointer;
  margin-right:6px;
}
.tti-style-buttons .tti-toggle.active{
  background:#222;
  border-color:#444;
  color:#fff;
}

/* actions */
.tti-actions{
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:8px;
}
.tti-format select{
  padding:8px;
  border-radius:8px;
  background:#121212;
  color:#fff;
  border:1px solid rgba(255,255,255,0.04);
}

.tti-buttons{ display:flex; gap:8px; margin-left:auto; }
.tti-btn{
  padding:9px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.06);
  background:#151515;
  color:#fff;
  cursor:pointer;
}
.tti-btn.tti-primary{
  background:linear-gradient(180deg,#1f8cff,#176fd6);
  border:none;
  color:#fff;
}

/* preview */
.tti-preview{
  background:#070707;
  padding:12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.04);
}
.tti-preview-title{ color:#ddd; font-weight:600; margin-bottom:8px; display:flex; align-items:center; gap:8px;}
.tti-preview-wrap{
  background:#000;
  border-radius:8px;
  padding:8px;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:240px;
  box-shadow: inset 0 0 40px rgba(255,255,255,0.02);
}
#tti_preview{
  max-width:100%;
  height:auto;
  border-radius:4px;
  display:block;
}

/* hint/help */
.tti-hint, .tti-help { font-size:12px; color:#8b8b8b; margin-top:6px; }

/* responsiveness */
@media (max-width:900px){
  .tti-app{ flex-direction:column; }
  .tti-right{ order:-1; }
}