/* Titles admin page (#titles, roadmap item 45, admin/titles.js). Reuses the items-* page classes; rows fold into cards
   at ≤600px. The sample shows the name plate with the title under it, as above a head in the game. */
.titles-page .titles-admin-list{display:flex;flex-direction:column;gap:10px}
.titles-page .titles-row{display:grid;grid-template-columns:170px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:12px 14px}
.titles-page .titles-sample{display:inline-flex;flex-direction:column;align-items:center;gap:3px;padding:10px 12px;border-radius:12px;background:linear-gradient(#8bb36f,#6f9a5a);min-width:0;max-width:100%;box-sizing:border-box}
.titles-page .titles-sample.is-off{filter:grayscale(.85);opacity:.7}
.titles-page .titles-sample-name{padding:3px 11px;border-radius:12px;background:#274336cf;color:#fffde9;font-size:11px;font-weight:500;white-space:nowrap}
.titles-page .titles-sample-title{max-width:100%;padding:1px 9px;border-radius:9px;background:#1d2f27c0;font-size:10px;font-weight:500;text-shadow:0 0 2px #0f1d17,0 0 2px #0f1d17;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.titles-page .titles-row-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.titles-page .titles-row-info{display:flex;flex-direction:column;gap:3px;min-width:0;overflow-wrap:anywhere}
.titles-page .titles-row-uses{font-size:12px;color:#6c5a46}
.titles-page .titles-row-uses a{color:#2f6b3a}
.titles-page .titles-row-stats{display:flex;flex-direction:column;gap:2px;font-size:12px;color:#6c5a46;white-space:nowrap}
.titles-page .titles-color-code{font-family:ui-monospace,Consolas,monospace}
.titles-page .titles-row-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-end;max-width:240px}
.titles-page .titles-tag{display:inline-block;padding:1px 8px;border-radius:999px;background:#e6ecdc;border:1px solid #c7d2b8;color:#3f6a4c;font-size:11px;font-weight:700}
.titles-page .titles-tag-off{background:#f1e4dc;border-color:#d9bcae;color:#8a4b37}
.titles-page .titles-tag-draft{background:#fff1c9;border-color:#e2c779;color:#7a5a1e}
.titles-page .titles-editor{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}
.titles-page .titles-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}
.titles-page .titles-color-field{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.titles-page .titles-color-field input[type=color]{width:52px;height:36px;padding:2px;border-radius:8px}
.titles-page .titles-swatches{display:flex;flex-wrap:wrap;gap:6px}
.titles-page .titles-swatch{width:30px;height:30px;min-width:30px;padding:0;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #b9a38a;cursor:pointer}
.titles-page .titles-active{display:flex;align-items:center;gap:8px}
.titles-page .titles-preview-box{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.titles-page .titles-editor-actions{display:flex;flex-wrap:wrap;gap:8px}
.titles-page .titles-removed h3{margin:14px 0 6px;font-size:15px}
@media(max-width:600px){.titles-page .titles-row{grid-template-columns:minmax(0,1fr)}.titles-page .titles-row-actions{justify-content:flex-start;max-width:none}.titles-page .titles-form{grid-template-columns:minmax(0,1fr)}.titles-page .titles-row-stats{flex-direction:row;flex-wrap:wrap;gap:4px 12px}}