.tdst-root {
  --tdst-line: rgba(255,255,255,.12);
  --tdst-gold: #f2bd48;
  --tdst-text: #f5f7f3;
  --tdst-muted: #b9c4bc;
  width: min(1180px, 100%);
  margin: 24px auto;
  padding: 18px;
  color: var(--tdst-text);
  border: 1px solid var(--tdst-line);
  border-radius: 22px;
  background: radial-gradient(circle at 15% 0, rgba(72,121,82,.34), transparent 38%), linear-gradient(155deg, #0c1713, #07100d);
  box-shadow: 0 22px 65px rgba(0,0,0,.28);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  box-sizing: border-box;
}
.tdst-root * { box-sizing: border-box; }
.tdst-heading { display:flex; justify-content:space-between; gap:16px; align-items:end; flex-wrap:wrap; margin-bottom:12px; }
.tdst-heading h2 { margin:0 0 4px; color:#fff; font-size:clamp(23px,4vw,36px); letter-spacing:-.035em; }
.tdst-heading p { margin:0; color:var(--tdst-muted); }

.tdst-tabs {
  display:flex;
  gap:8px;
  margin:0 0 14px;
  padding:5px;
  border:1px solid var(--tdst-line);
  border-radius:15px;
  background:rgba(255,255,255,.045);
}
.tdst-tabs button {
  flex:1 1 180px;
  min-height:44px;
  border:1px solid transparent;
  border-radius:11px;
  color:#cbd5ce;
  background:transparent;
  font-weight:800;
  cursor:pointer;
}
.tdst-tabs button.is-active {
  color:#fff;
  border-color:rgba(242,189,72,.62);
  background:rgba(242,189,72,.17);
}

.tdst-test-panel[hidden] { display:none !important; }
.tdst-panel-heading {
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:end;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.tdst-panel-heading h3 { margin:0 0 3px; color:#fff; font-size:20px; }
.tdst-panel-heading p { margin:0; color:var(--tdst-muted); max-width:760px; }
.tdst-direction-badge { padding:8px 12px; border:1px solid var(--tdst-line); border-radius:999px; background:rgba(255,255,255,.055); white-space:nowrap; }

.tdst-arenas { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:14px; }
.tdst-arena-card { overflow:hidden; border:1px solid var(--tdst-line); border-radius:18px; background:rgba(13,24,20,.9); }
.tdst-arena-card.is-walk-card { background:rgba(25,48,31,.92); }
.tdst-card-head { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:11px 13px; border-bottom:1px solid var(--tdst-line); }
.tdst-card-head > div { display:flex; align-items:center; gap:8px; min-width:0; }
.tdst-character-name { color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tdst-attack-badge { flex:0 0 auto; padding:3px 7px; border:1px solid rgba(255,255,255,.14); border-radius:999px; color:#cbd6ce; background:rgba(255,255,255,.05); font-size:11px; font-weight:700; }
.tdst-status { color:var(--tdst-muted); font-size:12px; text-align:right; }
.tdst-canvas { display:block; width:100%; height:auto; aspect-ratio:16/10; background:#337d4c; }

.tdst-controls { display:grid; grid-template-columns:minmax(260px,340px) 1fr; gap:14px; margin-top:14px; }
.tdst-direction-pad { display:grid; grid-template-columns:repeat(3,72px); grid-template-rows:repeat(3,62px); justify-content:center; gap:8px; padding:14px; border:1px solid var(--tdst-line); border-radius:18px; background:rgba(16,27,23,.86); }
.tdst-direction-pad button { border:1px solid rgba(255,255,255,.18); border-radius:14px; color:#fff; background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.04)); font-size:29px; cursor:pointer; transition:.12s ease; }
.tdst-direction-pad button:hover { transform:translateY(-2px); border-color:rgba(242,189,72,.8); }
.tdst-direction-pad button.is-active { transform:scale(.97); border-color:var(--tdst-gold); background:rgba(242,189,72,.22); }
.tdst-direction-pad span { display:grid; place-items:center; border:1px dashed rgba(255,255,255,.13); border-radius:14px; color:#b9c4bc; font-size:11px; font-weight:900; letter-spacing:.08em; }

.tdst-options { display:flex; flex-wrap:wrap; gap:10px; align-content:flex-start; padding:14px; border:1px solid var(--tdst-line); border-radius:18px; background:rgba(16,27,23,.86); }
.tdst-options button { border:1px solid rgba(255,255,255,.17); border-radius:11px; color:#fff; background:rgba(255,255,255,.07); padding:9px 12px; font-weight:750; cursor:pointer; }
.tdst-options button.is-active { border-color:var(--tdst-gold); background:rgba(242,189,72,.20); }
.tdst-options label { display:flex; flex-wrap:wrap; gap:8px; align-items:center; color:var(--tdst-muted); }
.tdst-options input[type=range] { accent-color:var(--tdst-gold); }
.tdst-options p { flex-basis:100%; margin:4px 0 0; color:var(--tdst-muted); font-size:13px; line-height:1.5; }

.tdst-admin-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin:18px 0; }
.tdst-admin-panel { padding:18px; border:1px solid #dcdcde; border-radius:10px; background:#fff; }
.tdst-upload-preview { margin-top:12px; max-width:330px; padding:8px; border:1px solid #dcdcde; border-radius:8px; background:#f6f7f7; }
.tdst-upload-preview img { display:block; max-width:100%; height:auto; }
.tdst-character-list { display:grid; gap:10px; }
.tdst-character-row { display:grid; grid-template-columns:74px 1fr auto; gap:10px; align-items:center; padding:8px; border:1px solid #e2e4e7; border-radius:8px; }
.tdst-character-row img { width:74px; height:74px; object-fit:cover; border-radius:6px; background:#eee; }
.tdst-character-row strong,.tdst-character-row span { display:block; }
.tdst-character-row span,.tdst-character-row small { color:#646970; }
.tdst-admin-message { min-height:20px; font-weight:600; }
.tdst-admin-message.is-error { color:#b32d2e; }
.tdst-admin-message.is-success { color:#008a20; }
.tdst-empty { grid-column:1/-1; margin:0; padding:24px; border:1px dashed var(--tdst-line); border-radius:16px; color:var(--tdst-muted); text-align:center; }

.tdst-preview-frame { position:relative; overflow:hidden; border-radius:6px; background:#eee; }
.tdst-preview-frame img { display:block; width:100%; height:auto; }
.tdst-preview-frame span { position:absolute; display:block; pointer-events:none; background:rgba(37,99,235,.55); }
.tdst-grid-v { top:0; bottom:0; width:1px; }
.tdst-grid-v-1 { left:33.333%; }
.tdst-grid-v-2 { left:66.666%; }
.tdst-grid-h { left:0; right:0; height:1px; }
.tdst-grid-h-1 { top:33.333%; }
.tdst-grid-h-2 { top:66.666%; }
.tdst-upload-preview small { display:block; margin-top:6px; color:#646970; }

@media (max-width:850px) {
  .tdst-admin-grid { grid-template-columns:1fr; }
  .tdst-controls { grid-template-columns:1fr; }
}
@media (max-width:520px) {
  .tdst-root { padding:10px; }
  .tdst-tabs { flex-direction:column; }
  .tdst-direction-pad { grid-template-columns:repeat(3,64px); grid-template-rows:repeat(3,56px); }
  .tdst-card-head { align-items:flex-start; }
}


/* Version 1.3 visual crop and direction editor */
.tdst-sprite-editor {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid #c3c4c7;
  border-radius: 10px;
  background: #f6f7f7;
}
.tdst-editor-toolbar { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.tdst-direction-editor-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(130px,1fr));
  gap:10px;
  max-width:820px;
  margin:14px 0;
}
.tdst-direction-editor-tile,
.tdst-direction-editor-empty {
  min-height:160px;
  border:2px solid #dcdcde;
  border-radius:10px;
  background:#fff;
}
.tdst-direction-editor-tile {
  display:flex;
  flex-direction:column;
  gap:5px;
  align-items:stretch;
  padding:8px;
  color:#1d2327;
  cursor:pointer;
}
.tdst-direction-editor-tile strong { text-align:left; }
.tdst-direction-editor-tile canvas { display:block; width:100%; height:auto; border-radius:6px; }
.tdst-direction-editor-tile small { color:#646970; text-align:left; }
.tdst-direction-editor-tile.is-selected { border-color:#2271b1; box-shadow:0 0 0 2px rgba(34,113,177,.16); }
.tdst-direction-editor-tile.is-dragging { opacity:.45; }
.tdst-direction-editor-tile.is-drop-target { border-color:#00a32a; background:#edfaef; }
.tdst-direction-editor-empty {
  display:grid;
  place-items:center;
  border-style:dashed;
  color:#8c8f94;
  font-weight:800;
  letter-spacing:.12em;
}
.tdst-crop-editor {
  display:grid;
  grid-template-columns:minmax(300px,620px) minmax(230px,330px);
  gap:18px;
  align-items:start;
}
#tdst-crop-workspace {
  display:block;
  width:100%;
  height:auto;
  max-width:620px;
  border:1px solid #c3c4c7;
  border-radius:9px;
  background:#fff;
  touch-action:none;
  cursor:move;
}
.tdst-crop-controls {
  display:grid;
  gap:12px;
  position:sticky;
  top:42px;
  padding:14px;
  border:1px solid #dcdcde;
  border-radius:9px;
  background:#fff;
}
.tdst-crop-controls label { display:grid; grid-template-columns:1fr auto; gap:5px 8px; align-items:center; }
.tdst-crop-controls label input[type=range],
.tdst-crop-controls label select { grid-column:1/-1; width:100%; }
.tdst-crop-controls output { color:#50575e; font-variant-numeric:tabular-nums; }
.tdst-crop-controls .tdst-inline-check { display:flex; align-items:center; gap:8px; }
.tdst-row-actions { display:flex; flex-direction:column; gap:6px; align-items:flex-end; }
.tdst-character-row { grid-template-columns:74px 1fr auto; }

@media (max-width: 900px) {
  .tdst-crop-editor { grid-template-columns:1fr; }
  .tdst-crop-controls { position:static; }
}
@media (max-width: 650px) {
  .tdst-direction-editor-grid { grid-template-columns:repeat(3,minmax(80px,1fr)); gap:5px; }
  .tdst-direction-editor-tile,
  .tdst-direction-editor-empty { min-height:105px; padding:4px; }
  .tdst-direction-editor-tile strong { font-size:11px; }
  .tdst-direction-editor-tile small { display:none; }
}


/* Version 1.4 management improvements */
.tdst-form-actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.tdst-row-actions {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px;
  align-items:center;
}
.tdst-row-actions small {
  color:#646970;
  font-weight:600;
}
.tdst-character-row { align-items:center; }
.tdst-arena-card.is-highlighted {
  box-shadow:0 0 0 3px rgba(59,130,246,.38), 0 12px 30px rgba(37,99,235,.16);
  transform:translateY(-2px);
}


/* Version 1.5 graphics export */
.tdst-library-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:8px;
}
.tdst-library-heading h2 { margin-top:0; margin-bottom:4px; }
.tdst-library-heading .description { margin:0; max-width:620px; }
.tdst-editor-toolbar { align-items:center; }
.tdst-row-actions .button-small { white-space:nowrap; }
@media (max-width:650px) {
  .tdst-library-heading > button { width:100%; }
  .tdst-row-actions { justify-content:flex-start; }
}