:root {
  --bg: #0F1219;
  --bg-card: #161b25;
  --bg-input: #111620;
  --text: #e2e8f0;
  --text-secondary: #94a3b8;
  --text-muted: #475569;
  --primary: #64748b;
  --secondary: #94a3b8;
  --accent: #38bdf8;
  --border: rgba(100,116,139,0.12);
  --border-strong: rgba(100,116,139,0.25);
  --red: #f87171;
  --amber: #fbbf24;
  --green: #4ade80;
  --radius: 12px;
  --font: 'Inter',system-ui,sans-serif;
  --transition: 0.2s ease;
}

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

.header{display:flex;align-items:center;justify-content:space-between;padding:6px 14px;background:var(--bg-card);border-bottom:1px solid var(--border);height:40px}
.header-left,.header-right{display:flex;align-items:center;gap:8px}
.logo{font-size:1rem}
h1{font-size:0.88rem;font-weight:700;color:var(--accent)}

.btn{padding:5px 10px;border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--text-secondary);font-family:var(--font);font-size:0.72rem;cursor:pointer;transition:all var(--transition);white-space:nowrap}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.primary{background:rgba(56,189,248,0.06);border-color:var(--accent);color:var(--accent)}

.app-layout{display:flex;height:calc(100vh - 40px)}
.editor-panel{width:340px;padding:12px 14px;overflow-y:auto;border-right:1px solid var(--border)}
.preview-panel{flex:1;display:flex;flex-direction:column;overflow:hidden}

/* Form */
.form-group{margin-bottom:8px}
.form-group label{display:block;font-size:0.68rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px}
.input,.textarea{width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:8px;background:var(--bg-input);color:var(--text);font-family:var(--font);font-size:0.8rem;transition:border var(--transition)}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--accent)}
.textarea{resize:vertical}
.select{width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:8px;background:var(--bg-input);color:var(--text);font-family:var(--font);font-size:0.8rem}
.char-count{font-size:0.62rem;color:var(--text-muted);float:right;margin-top:2px}
.char-count.warn{color:var(--amber)}
.char-count.over{color:var(--red)}
.image-info{font-size:0.65rem;color:var(--text-muted);margin-top:3px}
.image-info.error{color:var(--red)}
.image-info.ok{color:var(--green)}

/* Warnings */
.warnings{margin-top:8px}
.warning-item{font-size:0.72rem;padding:4px 8px;margin-bottom:3px;border-radius:6px;background:rgba(251,191,36,0.05);border-left:3px solid var(--amber);color:var(--amber)}

/* Preview Tabs */
.preview-tabs{display:flex;border-bottom:1px solid var(--border);padding:0 8px}
.ptab{flex:1;padding:6px;border:none;background:transparent;color:var(--text-muted);font-family:var(--font);font-size:0.7rem;cursor:pointer;transition:all var(--transition);text-align:center}
.ptab:hover{color:var(--accent)}
.ptab.active{color:var(--accent);border-bottom:2px solid var(--accent)}

/* Preview Cards */
.preview-area{flex:1;padding:16px;overflow-y:auto;display:flex;justify-content:center;align-items:flex-start}

.preview-card{width:100%;max-width:550px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border-strong);background:var(--bg-card);transition:all 0.3s ease}
.preview-card img{width:100%;display:block;height:auto;max-height:287px;object-fit:cover;background:var(--bg-input)}
.preview-card .pc-body{padding:10px 12px}
.preview-card .pc-domain{font-size:0.65rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}
.preview-card .pc-title{font-size:0.88rem;font-weight:600;margin:3px 0;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.preview-card .pc-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}

/* Twitter variant */
.preview-card.twitter{border-radius:16px}
.preview-card.twitter img{border-radius:0}
/* Facebook variant */
.preview-card.facebook{border-radius:0}
.preview-card.facebook .pc-body{background:#242526;border-top:none}
/* LinkedIn variant */
.preview-card.linkedin{border-radius:2px}
/* Slack variant */
.preview-card.slack{border-left:4px solid var(--accent);border-radius:4px}
.preview-card.slack img{max-height:200px}
/* Discord variant */
.preview-card.discord{border-left:4px solid #5865f2;border-radius:4px;background:#2f3136}
.preview-card.discord .pc-title{color:#00aff4}

/* Summary card (small image) */
.preview-card.summary{display:flex;align-items:stretch}
.preview-card.summary img{width:120px;min-height:120px;max-height:none;flex-shrink:0}
.preview-card.summary .pc-body{display:flex;flex-direction:column;justify-content:center}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;z-index:100}
.modal{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;width:90%;max-width:450px;max-height:70vh;overflow-y:auto}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.modal-header h3{font-size:0.88rem;color:var(--accent)}
.btn-close{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:1rem}
.bm-item{padding:8px;border:1px solid var(--border);border-radius:8px;margin-bottom:4px;cursor:pointer;transition:all var(--transition)}
.bm-item:hover{border-color:var(--accent)}
.bm-item strong{font-size:0.78rem}
.bm-item .meta{font-size:0.62rem;color:var(--text-muted)}

@media(max-width:768px){
  .app-layout{flex-direction:column}
  .editor-panel{width:100%;border-right:none;border-bottom:1px solid var(--border);max-height:40vh}
  .preview-panel{flex:1}
}