/* CreatorAiHub tool kit — shared styles for the 69-tool expansion.
   Uses the site palette (see LIVE-TOOLS-PLAN.md): #06060e background,
   #0f0f1e cards, #1e1e32 borders, #7c3aed accent, #a78bfa / #c4b5fd highlights. */
[hidden] { display: none !important; }
.t69, .t69 *, .t69 *::before, .t69 *::after { box-sizing: border-box; }
.t69 img, .t69 video, .t69 canvas, .t69 iframe { max-width: 100%; }
.t69 pre, .t69 code { white-space: pre-wrap; word-break: break-word; }
.t69 { width: 100%; max-width: 980px; margin: 0 auto; padding: 28px 16px 40px; color: #e2e8f0; font-family: 'Inter', Arial, sans-serif; }
.t69 h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); color: #f1f5f9; margin: 6px 0 8px; line-height: 1.2; }
.t69 h1 span { color: #a78bfa; }
.t69 .t-lead { color: #94a3b8; font-size: 1rem; line-height: 1.6; margin: 0 0 14px; max-width: 760px; }
.t69 .t-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.t69 .t-badge { font-size: .75rem; font-weight: 600; color: #c4b5fd; background: rgba(124,58,237,.12); border: 1px solid rgba(124,58,237,.35); border-radius: 999px; padding: 4px 10px; }
.t69 .t-badge.live { color: #4ade80; background: rgba(74,222,128,.08); border-color: rgba(74,222,128,.3); }
.t69 .t-badge.pro { color: #fbbf24; background: rgba(251,191,36,.08); border-color: rgba(251,191,36,.3); }
.t69 .tool-breadcrumb { font-size: .82rem; color: #64748b; display: flex; gap: 6px; flex-wrap: wrap; }
.t69 .tool-breadcrumb a { color: #a78bfa; text-decoration: none; }

.t-app { background: #0b0b18; border: 1px solid #1e1e32; border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.t-row { display: flex; flex-direction: column; gap: 6px; }
.t-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.t-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.t-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 720px) { .t-grid3, .t-grid4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .t-grid2, .t-grid3 { grid-template-columns: 1fr; } }
.t-label { font-size: .76rem; color: #94a3b8; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.t-hint { font-size: .8rem; color: #64748b; line-height: 1.5; }
.t-input, .t-select, .t-textarea { width: 100%; background: #0f0f1e; border: 1px solid #1e1e32; border-radius: 10px; color: #f1f5f9; padding: 11px 13px; font-size: .95rem; font-family: inherit; outline: none; transition: border-color .15s; }
.t-input:focus, .t-select:focus, .t-textarea:focus { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,.18); }
.t-input::placeholder, .t-textarea::placeholder { color: #64748b; }
.t-textarea { resize: vertical; min-height: 140px; line-height: 1.55; }
.t-textarea.mono, .t-out.mono, .t-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; }
.t-select option { background: #0f0f1e; }
.t-check { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: #cbd5e1; cursor: pointer; }
.t-check input { width: 17px; height: 17px; accent-color: #7c3aed; }
.t-checks { display: flex; flex-wrap: wrap; gap: 10px 18px; }
input[type=range].t-range { width: 100%; accent-color: #7c3aed; }
input[type=color].t-input { height: 44px; padding: 4px; cursor: pointer; }

.t-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.t-btn { background: #7c3aed; color: #fff; border: 1px solid #7c3aed; border-radius: 10px; padding: 11px 18px; font-size: .92rem; font-weight: 700; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.t-btn:hover { background: #6d28d9; }
.t-btn:disabled { opacity: .5; cursor: not-allowed; }
.t-btn.ghost { background: transparent; color: #c4b5fd; border-color: #3b3b5c; }
.t-btn.ghost:hover { border-color: #7c3aed; background: rgba(124,58,237,.1); }
.t-btn.small { padding: 6px 11px; font-size: .8rem; border-radius: 8px; font-weight: 600; }
.t-btn.danger { background: transparent; color: #f87171; border-color: #7f1d1d; }
.t-btn:focus-visible, .t-tab:focus-visible, .t-chip:focus-visible, .t-drop:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }

.t-status { font-size: .88rem; line-height: 1.5; border-radius: 10px; padding: 10px 12px; display: none; }
.t-status.show { display: block; }
.t-status.info { color: #c4b5fd; background: rgba(124,58,237,.08); border: 1px solid rgba(124,58,237,.3); }
.t-status.ok { color: #4ade80; background: rgba(74,222,128,.06); border: 1px solid rgba(74,222,128,.25); }
.t-status.warn { color: #fbbf24; background: rgba(251,191,36,.06); border: 1px solid rgba(251,191,36,.25); }
.t-status.err { color: #f87171; background: rgba(248,113,113,.06); border: 1px solid rgba(248,113,113,.25); }

.t-drop { border: 2px dashed #2d2d4e; border-radius: 14px; padding: 26px 16px; text-align: center; color: #94a3b8; font-size: .92rem; cursor: pointer; background: #0d0d1c; transition: all .15s; }
.t-drop:hover, .t-drop.over { border-color: #7c3aed; color: #e2e8f0; background: rgba(124,58,237,.06); }
.t-drop strong { color: #c4b5fd; }
.t-drop input { display: none; }

.t-progress { height: 8px; background: #1e1e32; border-radius: 999px; overflow: hidden; display: none; }
.t-progress.show { display: block; }
.t-progress > div { height: 100%; width: 0; background: linear-gradient(90deg, #7c3aed, #a78bfa); transition: width .2s; }
.t-progress.indeterminate > div { width: 35%; animation: t69slide 1.2s infinite ease-in-out; }
@keyframes t69slide { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }
.t-progress-label { font-size: .8rem; color: #94a3b8; }

.t-out { width: 100%; background: #0f0f1e; border: 1px solid #1e1e32; border-radius: 12px; color: #e2e8f0; padding: 14px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; min-height: 60px; }
.t-result { display: none; flex-direction: column; gap: 12px; }
.t-result.show { display: flex; }
.t-panel { background: #0f0f1e; border: 1px solid #1e1e32; border-radius: 12px; padding: 14px; }
.t-panel h3 { font-size: .95rem; color: #f1f5f9; margin: 0 0 8px; }
.t-kv { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 6px 12px; font-size: .88rem; }
.t-kv dt { color: #94a3b8; }
.t-kv dd { color: #f1f5f9; margin: 0; word-break: break-word; }
.t-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.t-stat { background: #0d0d1a; border: 1px solid #1e1e32; border-radius: 12px; padding: 12px; text-align: center; }
.t-stat b { display: block; font-size: 1.3rem; color: #f1f5f9; }
.t-stat span { font-size: .75rem; color: #94a3b8; }

.t-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.t-chip { background: rgba(124,58,237,.12); border: 1px solid rgba(124,58,237,.35); color: #ddd6fe; border-radius: 999px; padding: 5px 11px; font-size: .84rem; cursor: pointer; font-family: inherit; }
.t-chip:hover { background: rgba(124,58,237,.25); }

.t-table-wrap { overflow-x: auto; border: 1px solid #1e1e32; border-radius: 12px; }
.t-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.t-table th, .t-table td { padding: 8px 10px; border-bottom: 1px solid #1e1e32; text-align: left; vertical-align: top; }
.t-table th { color: #94a3b8; font-weight: 600; background: #0d0d1c; position: sticky; top: 0; }
.t-table td { color: #e2e8f0; word-break: break-word; }
.t-ok { color: #4ade80; } .t-warn { color: #fbbf24; } .t-err { color: #f87171; } .t-muted { color: #64748b; }

.t-tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid #1e1e32; padding-bottom: 8px; }
.t-tab { background: transparent; border: 1px solid #2d2d4e; color: #94a3b8; border-radius: 999px; padding: 7px 14px; font-size: .85rem; cursor: pointer; font-family: inherit; font-weight: 600; }
.t-tab[aria-selected="true"] { background: rgba(124,58,237,.25); border-color: rgba(124,58,237,.6); color: #ede9fe; }
.t-tabpanel[hidden] { display: none; }

.t-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.t-thumb { background: #0f0f1e; border: 1px solid #1e1e32; border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 6px; font-size: .75rem; color: #94a3b8; position: relative; }
.t-thumb img, .t-thumb canvas { width: 100%; height: auto; border-radius: 6px; background: #fff; display: block; }
.t-thumb.sel { border-color: #7c3aed; box-shadow: 0 0 0 2px rgba(124,58,237,.4); }
.t-thumb label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.t-files { display: flex; flex-direction: column; gap: 6px; }
.t-file { display: flex; align-items: center; gap: 10px; background: #0f0f1e; border: 1px solid #1e1e32; border-radius: 10px; padding: 8px 10px; font-size: .86rem; }
.t-file .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e2e8f0; }
.t-file .sz { color: #64748b; font-size: .76rem; }

.t-preview { background: #0f0f1e; border: 1px solid #1e1e32; border-radius: 12px; padding: 12px; overflow: auto; }
.t-preview img, .t-preview video, .t-preview canvas { max-width: 100%; height: auto; display: block; margin: 0 auto; border-radius: 8px; }
.t-checker { background-color: #fff; background-image: linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%); background-size: 20px 20px; background-position: 0 0,0 10px,10px -10px,-10px 0; }
.t-note { font-size: .84rem; color: #94a3b8; line-height: 1.55; background: #0d0d1c; border-left: 3px solid #7c3aed; border-radius: 8px; padding: 10px 12px; }
.t-note.warn { border-left-color: #f59e0b; color: #fcd34d; }
.t-diff ins { background: rgba(74,222,128,.18); color: #bbf7d0; text-decoration: none; border-radius: 3px; }
.t-diff del { background: rgba(248,113,113,.18); color: #fecaca; border-radius: 3px; }
.t-diff .ln { display: block; white-space: pre-wrap; padding: 1px 8px; border-left: 3px solid transparent; }
.t-diff .ln.add { background: rgba(74,222,128,.08); border-left-color: #22c55e; }
.t-diff .ln.del { background: rgba(248,113,113,.08); border-left-color: #ef4444; }
.t-gate { background: rgba(251,191,36,.06); border: 1px solid rgba(251,191,36,.3); border-radius: 12px; padding: 14px; color: #fde68a; font-size: .9rem; line-height: 1.6; }
.t-gate h3 { color: #fbbf24; margin: 0 0 6px; font-size: 1rem; }

/* Content sections below the tool */
.t69 .t-sec { margin-top: 30px; }
.t69 .t-sec h2 { font-size: 1.25rem; color: #f1f5f9; margin: 0 0 10px; }
.t69 .t-sec p, .t69 .t-sec li { color: #94a3b8; line-height: 1.7; font-size: .95rem; }
.t69 .t-sec ol, .t69 .t-sec ul { padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.t69 .t-faq details { background: #0f0f1e; border: 1px solid #1e1e32; border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; }
.t69 .t-faq summary { cursor: pointer; color: #f1f5f9; font-weight: 600; }
.t69 .t-faq details p { margin: 8px 0 0; }
.t69 .t-related { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.t69 .t-related a { display: block; background: #0f0f1e; border: 1px solid #1e1e32; border-radius: 10px; padding: 12px; color: #e2e8f0; text-decoration: none; font-size: .9rem; font-weight: 600; }
.t69 .t-related a:hover { border-color: #7c3aed; }
.t69 .t-related a small { display: block; color: #64748b; font-weight: 400; margin-top: 3px; }
.t-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }