.tv-workspace { --tv-line:#dbe4dd; --tv-soft:#eff5ef; --tv-accent:#286d45; color:var(--text,#213629); font-size:14px; line-height:1.55; }
.tv-workspace h2,.tv-workspace h3,.tv-workspace p { margin:0; }
.tv-workspace button,.tv-workspace input,.tv-workspace textarea { font:inherit; }
.tv-workspace button { cursor:pointer; min-height:38px; }
.tv-workspace button:disabled { cursor:default; opacity:.55; }
.tv-workspace button:focus-visible,.tv-workspace textarea:focus-visible { outline:3px solid #9ac8a6; outline-offset:3px; }
.tv-identity { display:flex; align-items:center; gap:14px; padding:20px 24px; background:linear-gradient(105deg,#f0f7ed,#faf8f0); border:1px solid var(--tv-line); border-radius:16px; margin-bottom:18px; }
.tv-identity img { width:56px; height:56px; object-fit:contain; border-radius:16px; background:#fff; }
.tv-identity strong { font-size:19px; }
.tv-muted { color:#637468; font-size:13px; }
.tv-identity .tv-muted { margin-top:4px; }
.tv-tabs { display:flex; gap:8px; margin-bottom:18px; border-bottom:1px solid var(--tv-line); padding-bottom:12px; }
.tv-tabs button { border:1px solid transparent; border-radius:10px; padding:9px 18px; background:none; color:#52645a; font-weight:750; }
.tv-tabs button[aria-selected=true] { background:var(--tv-soft); color:var(--tv-accent); border-color:#c8ddca; }
.tv-panel { border:1px solid var(--tv-line); border-radius:16px; padding:24px; background:#fff; min-width:0; }
.tv-compose-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:22px; align-items:start; }
.tv-panel-heading { display:flex; gap:12px; justify-content:space-between; align-items:center; margin-bottom:16px; }
.tv-panel-heading h2,.tv-panel-heading h3 { font-size:19px; }
.tv-field { display:grid; gap:8px; margin-bottom:18px; font-weight:750; }
.tv-field textarea { min-height:180px; resize:vertical; width:100%; box-sizing:border-box; border:1px solid #cdd9cf; border-radius:12px; padding:14px; color:inherit; background:#fafcf9; line-height:1.7; font-weight:450; }
.tv-count { text-align:right; color:#647268; font-size:12px; font-weight:450; }
.tv-count.invalid { color:#a23623; }
.tv-image-tools { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; }
.tv-image-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.tv-image-tile { position:relative; aspect-ratio:1; background:#f2f5ef; border:1px solid var(--tv-line); border-radius:12px; overflow:hidden; }
.tv-image-tile img { width:100%; height:100%; object-fit:contain; display:block; }
.tv-image-tile button { position:absolute; right:4px; top:4px; min-height:30px; width:30px; border:1px solid #d4ded6; background:#fff; border-radius:50%; color:#495a4d; }
.tv-image-order { position:absolute; left:5px; bottom:5px; border-radius:6px; background:#ffffffec; padding:1px 7px; font-size:12px; }
.tv-empty-images { padding:24px 18px; background:#f7faf4; border:1px dashed #bdcfbe; border-radius:12px; color:#607465; text-align:center; }
.tv-actions { display:flex; gap:10px; align-items:center; justify-content:flex-end; margin-top:20px; }
.tv-notice { margin:0 0 15px!important; padding:12px 15px; border-radius:10px; font-size:13px; }
.tv-notice.error { background:#fff1ed; color:#9b3824; border:1px solid #ecc7b8; }
.tv-notice.success { background:#edf6ec; color:#296c3b; border:1px solid #c4dbc8; }
.tv-pending { background:#fff7e7; border:1px solid #e9d4ae; border-radius:12px; padding:15px; margin-bottom:18px; }
.tv-pending button { margin-top:10px; }
.tv-preview { background:linear-gradient(155deg,#f5f8f1,#fcfaf5); }
.tv-preview-card { border:1px solid var(--tv-line); border-radius:14px; padding:16px; background:#fff; }
.tv-preview-author { display:flex; align-items:center; gap:10px; font-weight:800; margin-bottom:14px; }
.tv-preview-author img { width:38px; height:38px; object-fit:contain; }
.tv-preview-image { width:100%; max-height:330px; object-fit:contain; background:#f7f9f3; border-radius:10px; display:block; }
.tv-preview-copy { white-space:pre-wrap; word-break:break-word; margin-top:12px!important; }
.tv-record-layout { display:grid; grid-template-columns:310px minmax(0,1fr); gap:20px; align-items:start; }
.tv-records { display:grid; gap:9px; }
.tv-record { display:flex; gap:12px; width:100%; padding:13px; text-align:left; color:inherit; background:#fff; border:1px solid var(--tv-line); border-radius:12px; }
.tv-record.selected { border-color:#76a680; box-shadow:inset 0 0 0 1px #76a680; background:#f3f8f0; }
.tv-record img { width:58px; height:70px; object-fit:contain; border-radius:8px; background:#f4f6f1; flex-shrink:0; }
.tv-record-copy { min-width:0; display:grid; gap:5px; }
.tv-record-copy strong { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:14px; word-break:break-word; }
.tv-record-copy small { font-size:12px; color:#66756b; }
.tv-record-status { font-size:11px; color:#8a6344; }
.tv-post-images { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin:15px 0; }
.tv-post-images a { min-width:0; aspect-ratio:1; background:#f3f7f0; border:1px solid var(--tv-line); border-radius:10px; overflow:hidden; }
.tv-post-images img { width:100%; height:100%; object-fit:contain; display:block; }
.tv-post-copy { white-space:pre-wrap; word-break:break-word; margin:12px 0!important; }
.tv-comments { display:grid; gap:0; margin-top:16px; }
.tv-comment { padding:16px 0; border-top:1px solid var(--tv-line); display:grid; grid-template-columns:36px minmax(0,1fr); gap:11px; }
.tv-comment>img { width:36px; height:36px; object-fit:contain; border-radius:50%; background:#f0f4ed; }
.tv-comment-author { display:flex; gap:9px; align-items:center; }
.tv-comment-author time { color:#6d7b70; font-size:11px; }
.tv-comment-text { white-space:pre-wrap; overflow-wrap:anywhere; margin:5px 0!important; }
.tv-comment-images { display:flex; flex-wrap:wrap; gap:7px; margin:7px 0; }
.tv-comment-images img { width:90px; height:90px; object-fit:contain; background:#f4f7f0; border-radius:8px; }
.tv-comment-actions { display:flex; gap:8px; }
.tv-comment-actions button { border:1px solid #dce5dc; background:#f8faf5; border-radius:8px; padding:4px 11px; min-height:30px; color:#48644e; font-size:12px; }
.tv-comment-actions .liked { color:#21673c; background:#e9f3e7; border-color:#adcbb3; }
.tv-reply { padding-top:20px; border-top:1px solid var(--tv-line); margin-top:18px; }
.tv-reply textarea { min-height:90px; }
.tv-reply-target { display:flex; justify-content:space-between; gap:9px; font-size:13px; padding:9px 12px; background:var(--tv-soft); border-radius:9px; margin-bottom:12px; }
.tv-reply-target button { border:0; background:none; min-height:20px; color:#53735a; }
.tv-dialog { border:1px solid #cad9cd; border-radius:18px; padding:24px; width:min(520px,calc(100vw - 42px)); box-sizing:border-box; color:#203c2b; }
.tv-dialog::backdrop { background:#1b302954; }
.tv-dialog h3 { font-size:21px; margin-bottom:14px; }
.tv-dialog .tv-confirm-body { white-space:pre-wrap; overflow-wrap:anywhere; max-height:45vh; overflow:auto; background:#f6f9f2; border:1px solid var(--tv-line); border-radius:12px; padding:14px; margin:12px 0; }
.tv-skeleton { display:grid; gap:13px; padding:15px 0; }
.tv-skeleton span { height:56px; background:#edf2eb; border-radius:10px; }
.tv-more { display:block; width:100%; margin-top:15px; }
@media(max-width:1100px) { .tv-compose-layout,.tv-record-layout { grid-template-columns:1fr; } .tv-preview { max-width:none; } .tv-preview-card { max-width:340px; margin:auto; } .tv-records { max-height:380px; overflow:auto; } }
@media(max-width:600px) { .tv-panel { padding:17px; } .tv-identity { padding:16px; } .tv-identity strong { font-size:17px; } .tv-tabs button { padding:8px 12px; } .tv-panel-heading { flex-wrap:wrap; } .tv-actions { flex-wrap:wrap; } .tv-comment-author { flex-wrap:wrap; gap:3px 8px; } .tv-image-grid { gap:7px; } }