.tt { border: 1px solid #d4d4d8; border-radius: 10px; background: #fff; overflow: hidden; max-width: 900px; }
.tt-bar { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; border-bottom: 1px solid #e4e4e7; background: #fafafa; position: sticky; top: 0; z-index: 2; }
.tt-btn { min-width: 30px; height: 30px; padding: 0 7px; border: 0; border-radius: 6px; background: transparent; color: #3f3f46; cursor: pointer; font: 600 13px Inter, system-ui, sans-serif; display: inline-grid; place-items: center; }
.tt-btn:hover { background: #ececee; }
.tt-btn.on { background: #182a4e; color: #fff; }
.tt-sep { width: 1px; background: #e4e4e7; margin: 4px 4px; }
.tt-area .ProseMirror { min-height: 220px; padding: 14px 16px; outline: none; font: 15px/1.7 Inter, system-ui, sans-serif; color: #27272a; }
.tt-area .ProseMirror > * + * { margin-top: .6em; }
.tt-area .ProseMirror h2 { font-size: 21px; margin: 1em 0 .3em; } .tt-area .ProseMirror h3 { font-size: 17px; margin: .9em 0 .3em; }
.tt-area .ProseMirror a { color: #17a673; }
.tt-area .ProseMirror img { max-width: 100%; border-radius: 8px; }
.tt-area .ProseMirror blockquote { border-left: 3px solid #17a673; margin: 0; padding-left: 12px; color: #52525b; }
.tt-area .ProseMirror pre { background: #0f172a; color: #e2e8f0; padding: 10px 12px; border-radius: 8px; }
.tt-area .ProseMirror table { border-collapse: collapse; width: 100%; }
.tt-area .ProseMirror td, .tt-area .ProseMirror th { border: 1px solid #e4e4e7; padding: 6px 8px; vertical-align: top; }
.tt-area .ProseMirror th { background: #f4f4f5; }
.tt-area .ProseMirror p.is-editor-empty:first-child::before { content: attr(data-placeholder); color: #a1a1aa; float: left; height: 0; pointer-events: none; }
.tt.tt-source .tt-area { display: none; }
.tt.tt-source .tt-btn:not([data-k=html]) { opacity: .35; pointer-events: none; }
.tt-field textarea { font-family: ui-monospace, Menlo, monospace; font-size: 13px; width: 100%; max-width: 900px; }
.tt-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.45); display: grid; place-items: center; }
.tt-mbox { background: #fff; color: #18181b; border-radius: 14px; padding: 16px; width: min(760px, 94vw); max-height: 86vh; display: flex; flex-direction: column; gap: 10px; }
.tt-mhead { display: flex; align-items: center; gap: 10px; } .tt-mhead b { font-size: 16px; }
.tt-q { flex: 1; height: 34px; border: 1px solid #d4d4d8; border-radius: 8px; padding: 0 10px; }
.tt-x { margin-left: auto; border: 0; background: none; font-size: 22px; cursor: pointer; }
.tt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; overflow-y: auto; min-height: 200px; }
.tt-it { aspect-ratio: 1; border: 2px solid transparent; border-radius: 8px; background: #f4f4f5 center/cover; cursor: pointer; }
.tt-it:hover { border-color: #17a673; }
.tt-mfoot { display: flex; gap: 10px; align-items: center; }
.tt-up, .tt-more, .tt-go { border: 1px solid #d4d4d8; background: #fff; border-radius: 8px; padding: 7px 12px; cursor: pointer; font-weight: 600; font-size: 13px; }
.tt-go { margin-left: auto; background: #182a4e; color: #fff; border-color: #182a4e; }
.tt-p { min-height: 90px; border: 1px solid #d4d4d8; border-radius: 8px; padding: 10px; font: inherit; }
.tt-alt { height: 34px; border: 1px solid #d4d4d8; border-radius: 8px; padding: 0 10px; }
.tt-hint { margin: 0; font-size: 13px; color: #71717a; } .tt-st { font-size: 13px; color: #71717a; }