:root{
  --bg:#f3f4f6;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --primary:#1877f2; /* Facebook blue */
  --border:#e5e7eb;
  --accent:#4f46e5;
  --danger:#ef4444;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
}

/* Centered login screen */
.center-screen{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding:24px;
}
.login-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  width: 360px;
  padding:40px 28px 32px;
  text-align:center;
  box-shadow: 0 10px 30px rgba(0,0,0,.05);
}
.login-card .logo{
  font-size:64px;
  line-height:1;
  margin-bottom:12px;
}
.login-card h1{
  font-size:22px;
  margin: 0 0 18px 0;
}
.fb-login-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--primary);
  color:#fff;
  text-decoration:none;
  padding:10px 16px;
  border-radius:6px;
  font-weight:600;
  box-shadow:0 1px 0 rgba(0,0,0,.1) inset;
}
.fb-login-btn:hover{filter:brightness(.95)}
.fb-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:3px; background:#fff; color:var(--primary);
  font-weight:800;
}

/* Layout for dashboard */
.wrapper{
  max-width:1200px;
  margin:24px auto;
  padding:0 16px;
}
.header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px;
}
.header .title{
  font-size:22px; font-weight:700;
}
/* Card */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 4px 14px rgba(0,0,0,.04);
}

/* Compose summary */
.summary-card{
  background:#fff;
  border:1px solid rgba(148,163,184,.35);
  border-radius:18px;
  padding:18px 20px;
  box-shadow:0 14px 40px rgba(15,23,42,.08);
  transition:transform .2s ease, box-shadow .2s ease;
}
.summary-card:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 50px rgba(15,23,42,.12);
}
.summary-label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:600;
  color:#64748b;
}
.summary-value{
  font-size:30px;
  font-weight:700;
  margin:6px 0 4px 0;
  color:#0f172a;
}
.summary-foot{
  font-size:12px;
  color:#64748b;
}

/* Composer layout */
.composer-card{
  background:#fff;
  border:1px solid rgba(226,232,240,.9);
  border-radius:22px;
  padding:24px 26px;
  box-shadow:0 24px 60px rgba(15,23,42,.12);
}
.composer-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:22px;
}
.composer-title{
  margin:0;
  font-size:20px;
  font-weight:700;
  color:#0f172a;
}
.composer-subtitle{
  margin:4px 0 0 0;
  font-size:14px;
  color:#64748b;
  max-width:52ch;
}
.platform-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:12px;
  font-weight:700;
  font-size:14px;
  background:#eef2ff;
  color:#4338ca;
  box-shadow:0 10px 25px rgba(99,102,241,.2);
}
.platform-badge--facebook{
  background:rgba(24,119,242,.15);
  color:#1877f2;
  box-shadow:0 14px 28px rgba(24,119,242,.25);
}
.platform-badge--instagram{
  background:linear-gradient(130deg,#f97316,#ec4899,#8b5cf6);
  color:#fff;
  box-shadow:0 20px 35px rgba(236,72,153,.35);
}

@media (max-width: 768px){
  .composer-card{ padding:20px 18px; }
  .composer-header{ flex-direction:column; align-items:flex-start; }
}

.field-row{
  display:grid;
  gap:12px;
  margin-bottom:18px;
}
.field-row:last-child{ margin-bottom:0; }
@media (min-width: 768px){
  .field-row{
    grid-template-columns:140px minmax(0,1fr);
    align-items:flex-start;
  }
  .field-row.field-row--checkbox{
    align-items:center;
  }
}
.field-label{
  font-weight:600;
  color:#475569;
  font-size:14px;
}
.field-control{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.field-hint{
  font-size:12px;
  color:#64748b;
  margin:0;
}
.field-stack{
  border-top:1px solid rgba(226,232,240,.8);
  padding-top:16px;
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.input-control{
  width:100%;
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  font-size:14px;
  color:#0f172a;
  background:#fff;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.input-control:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(79,70,229,.15);
}
.input-control[disabled]{
  background:#f8fafc;
  cursor:not-allowed;
}
.resize-y{
  resize:vertical;
  min-height:120px;
}
.checkbox-inline{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  color:#475569;
}
.checkbox-control{
  width:16px;
  height:16px;
  border:1px solid var(--border);
  border-radius:4px;
  accent-color:var(--accent);
}

.field-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.schedule-controls{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
.schedule-controls input[type="datetime-local"]{
  min-width:220px;
}
.schedule-placeholder{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  opacity:.6;
}
.btn{
  border:1px solid transparent;
  border-radius:10px;
  padding:10px 16px;
  font-weight:600;
  cursor:pointer;
  transition:transform .1s ease, box-shadow .2s ease, background .2s ease;
}
.btn-primary,
.btn.primary{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
  box-shadow:0 16px 30px rgba(79,70,229,.35);
}
.btn-primary:hover,
.btn.primary:hover{
  filter:brightness(.95);
  transform:translateY(-1px);
}
.btn-secondary,
.btn.secondary{
  background:#eef2ff;
  border-color:#c7d2fe;
  color:#4338ca;
}
.btn-secondary:hover,
.btn.secondary:hover{
  filter:brightness(.97);
  transform:translateY(-1px);
}
.btn:disabled,
.btn.is-loading{
  opacity:.65;
  pointer-events:none;
  box-shadow:none;
}
.btn.is-disabled{
  opacity:.65;
}

.field-banner{
  border-radius:14px;
  border:1px solid rgba(250,204,21,.4);
  background:#fefce8;
  color:#92400e;
  font-size:13px;
  padding:12px 14px;
}

/* Accordion */
.accordion .item + .item{ border-top:1px solid var(--border); }
.accordion .head{
  padding:14px 16px;
  cursor:pointer;
  font-weight:600;
  display:flex; align-items:center; justify-content:space-between;
}
.accordion .body{
  padding:16px;
  border-top:1px dashed var(--border);
  display:none;
}
.accordion .item.open .body{ display:block; }
.accordion .caret{
  transition: transform .2s ease;
}
.accordion .item.open .caret{ transform: rotate(180deg); }

/* Form rows */
.form-row{
  display:flex; align-items:center; gap:10px; margin-bottom:12px;
}
.form-row label{ width:96px; color:var(--muted); font-weight:600; }
select,input[type="text"], textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:8px;
  background:#fff;
  outline:none;
}
textarea{ min-height:72px; resize:vertical; }

/* Media uploader */
.media-box{
  border:2px dashed #cfd3d9;
  background:#fafafa;
  border-radius:10px;
  padding:12px;
  min-height:120px;
  display:flex; align-items:center; gap:12px;
  overflow-x:auto;
}
.media-slot{
  width:92px; height:92px; border:2px dashed #d7dbe2;
  border-radius:10px; background:#fff;
  display:flex; align-items:center; justify-content:center;
  color:#9aa2ad; font-size:28px; cursor:pointer; user-select:none;
}
.media-box.drop-active{
  border-color:var(--accent);
  background:#eef2ff;
  box-shadow:0 0 0 2px rgba(79,70,229,.18) inset;
}
.media-thumb{
  width:92px; height:92px; border-radius:10px; overflow:hidden; border:1px solid var(--border); position:relative;
}
.media-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.media-thumb .remove{
  position:absolute; top:4px; right:4px; background:rgba(0,0,0,.6); color:#fff;
  border-radius:6px; font-size:12px; padding:2px 6px; cursor:pointer;
}

/* Preview card (Instagram-like) */
.preview{
  padding:12px;
}
.preview-panel{
  box-shadow:0 18px 48px rgba(15,23,42,.12);
  border-radius:20px;
}
.preview-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.preview-title{
  margin:0;
  font-size:16px;
  font-weight:700;
  color:#0f172a;
}
.preview-subtitle{
  margin:4px 0 0 0;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:600;
  color:#6366f1;
}
.preview-toggle{
  display:inline-flex;
  gap:6px;
  background:#f8fafc;
  border-radius:999px;
  padding:4px;
}
.preview-toggle-btn{
  border:0;
  background:transparent;
  font-size:12px;
  font-weight:600;
  color:#475569;
  padding:6px 12px;
  border-radius:999px;
  cursor:pointer;
  transition:background .2s ease, color .2s ease, box-shadow .2s ease;
}
.preview-toggle-btn:hover{
  color:#1e293b;
}
.preview-toggle-btn.is-active{
  background:#4338ca;
  color:#fff;
  box-shadow:0 10px 22px rgba(79,70,229,.35);
}
.preview .ig-card{
  border:1px solid var(--border); border-radius:12px; overflow:hidden; background:#fff;
}
.ig-header{
  display:flex; align-items:center; gap:8px; padding:10px 12px;
}
.ig-avatar{
  width:28px; height:28px; border-radius:50%; background:#10b981; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700;
}
.ig-username{ font-weight:700; font-size:14px; }
.ig-media{
  width:100%;
  aspect-ratio:1/1;
  background:#e5e7eb;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  position:relative;
}
.ig-media img,
.ig-media video{
  width:100%;
  height:100%;
  object-fit:cover;
}
.ig-caption{ padding:10px 12px; color:#111827; font-size:14px; }
.caption-counter{ font-size:12px; color:var(--muted); text-align:right; margin-top:4px; }

.preview-placeholder{
  padding:48px 12px;
}
.preview-placeholder p{ margin:0; }
.preview-placeholder .preview-guideline{
  margin-top:8px;
  font-size:12px;
  color:var(--muted);
}
.guideline-list{
  list-style:disc;
  padding-left:18px;
}
.guideline-list li{
  line-height:1.4;
}
.ig-meta{
  padding:6px 12px;
  font-size:12px;
  color:var(--muted);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}

/* Modal */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.35); display:none; align-items:center; justify-content:center;
}
.modal{
  width:480px; max-width:calc(100% - 32px); background:#fff; border-radius:12px; border:1px solid var(--border);
  padding:18px;
}
.modal .title{ font-weight:700; font-size:18px; margin-bottom:8px; }
.modal .muted{ color:var(--muted); }
.modal .row{ display:flex; align-items:center; gap:8px; margin-top:10px; }
.modal .row a{ color:var(--accent); text-decoration:none; font-weight:600; }
.modal .close{ margin-left:auto; cursor:pointer; color:var(--muted); }
.modal-show{ display:flex; }

/* Utility */
.mt-8{ margin-top:8px; }
.mt-12{ margin-top:12px; }
.mt-16{ margin-top:16px; }
.hidden{ display:none !important; }