:root {
  --bg: #0D1117;
  --bg-card: #161b22;
  --bg-input: #0d1117;
  --text: #e6edf3;
  --text-secondary: #8b949e;
  --text-muted: #6e7681;
  --twitter: #1DA1F2;
  --facebook: #4267B2;
  --discord: #7289DA;
  --linkedin: #0A66C2;
  --slack: #4A154B;
  --whatsapp: #25D366;
  --border: rgba(48,54,61,0.8);
  --border-strong: rgba(48,54,61,1);
  --shadow: 0 4px 14px rgba(0,0,0,0.4);
  --radius: 12px;
  --font: 'Inter',-apple-system,sans-serif;
  --transition: 0.25s ease;
  --glass: rgba(22,27,34,0.92);
  --error: #f85149;
  --warn: #d29922;
  --success: #3fb950;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh}

.header{background:var(--glass);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50}
.header-inner{max-width:1100px;margin:0 auto;padding:12px 24px;display:flex;align-items:center}
.logo{display:flex;align-items:center;gap:10px}
.logo h1{font-size:1.1rem;font-weight:700;background:linear-gradient(135deg,var(--twitter),var(--discord));-webkit-background-clip:text;-webkit-text-fill-color:transparent}

.main{max-width:1100px;margin:0 auto;padding:24px}

/* Input Section */
.input-section{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:24px}
.input-section h2{font-size:0.95rem;font-weight:600;margin-bottom:14px;color:var(--twitter)}
.field{margin-bottom:12px;position:relative}
.field label{display:block;font-size:0.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:4px}
.field input,.field textarea,.field select{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:var(--bg-input);color:var(--text);font-family:var(--font);font-size:0.85rem;transition:border-color var(--transition)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--twitter)}
.field textarea{resize:vertical}
.char-count{position:absolute;right:8px;top:50%;font-size:0.65rem;color:var(--text-muted)}
.char-count.warn{color:var(--warn)}
.char-count.error{color:var(--error)}
.img-status{position:absolute;right:8px;top:50%;font-size:0.7rem}
.img-status.ok{color:var(--success)}
.img-status.err{color:var(--error)}

.actions{display:flex;gap:8px;margin:16px 0 12px;flex-wrap:wrap}
.btn{padding:8px 14px;border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--text-secondary);font-family:var(--font);font-size:0.8rem;font-weight:500;cursor:pointer;transition:all var(--transition)}
.btn:hover{border-color:var(--twitter);color:var(--twitter)}
.btn.primary{background:rgba(29,161,242,0.1);border-color:var(--twitter);color:var(--twitter)}
.btn.primary:hover{background:rgba(29,161,242,0.2)}

/* Validator */
.validator{margin-top:10px;display:flex;flex-direction:column;gap:4px}
.val-item{font-size:0.78rem;padding:4px 8px;border-radius:4px}
.val-item.error{background:rgba(248,81,73,0.08);color:var(--error)}
.val-item.warn{background:rgba(210,153,34,0.08);color:var(--warn)}
.val-item.ok{background:rgba(63,185,80,0.05);color:var(--success)}

/* Code Output */
.code-output{margin-top:12px}
.code-header{font-size:0.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:4px}
.code-output pre{background:var(--bg-input);border:1px solid var(--border);border-radius:8px;padding:12px;overflow-x:auto}
.code-output code{font-family:'JetBrains Mono',monospace;font-size:0.75rem;color:var(--twitter);line-height:1.5;white-space:pre}

/* Templates */
.templates{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:24px}
.templates h3{font-size:0.85rem;font-weight:600;margin-bottom:10px;color:var(--discord)}
.template-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.template-btn{padding:10px;border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--text-secondary);font-family:var(--font);font-size:0.78rem;cursor:pointer;text-align:left;transition:all var(--transition)}
.template-btn:hover{border-color:var(--twitter);background:rgba(29,161,242,0.04)}
.template-btn strong{display:block;color:var(--text);margin-bottom:2px}

/* Preview Grid */
.preview-section{margin-bottom:24px}
.preview-section h2{font-size:0.95rem;font-weight:600;margin-bottom:14px;color:var(--discord)}
.preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}

.preview-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:border-color var(--transition)}
.preview-card:hover{border-color:var(--border-strong)}
.preview-card-header{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--border);font-size:0.75rem;font-weight:600;color:var(--text-muted)}
.preview-card-header .dot{width:8px;height:8px;border-radius:50%}
.preview-card-body{padding:12px}

/* Platform-specific card styles */
.card-image{width:100%;height:160px;background-color:#21262d;background-size:cover;background-position:center;border-radius:6px;margin-bottom:8px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:0.8rem;overflow:hidden}
.card-image img{width:100%;height:100%;object-fit:cover}
.card-title{font-size:0.88rem;font-weight:600;color:var(--text);margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-desc{font-size:0.78rem;color:var(--text-secondary);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-domain{font-size:0.7rem;color:var(--text-muted);margin-top:4px}

/* Small card variant for summary type */
.card-summary .card-body-inner{display:flex;gap:10px}
.card-summary .card-image{width:120px;height:120px;flex-shrink:0;margin-bottom:0;border-radius:4px}
.card-summary .card-text{flex:1;min-width:0}

/* History */
.history-section{margin-bottom:24px}
.history-section h2{font-size:0.85rem;font-weight:600;margin-bottom:10px;color:var(--text-muted)}
.history-list{display:flex;gap:6px;flex-wrap:wrap}
.history-chip{padding:5px 10px;border:1px solid var(--border);border-radius:20px;background:transparent;color:var(--text-secondary);font-size:0.72rem;cursor:pointer;transition:all var(--transition)}
.history-chip:hover{border-color:var(--twitter);color:var(--twitter)}

@media(max-width:640px){
  .preview-grid{grid-template-columns:1fr}
}