/* ===== Dropcast — design tokens (blue theme) ===== */
:root{
  --bg:#10131A;
  --panel:#181C26;
  --panel-2:#1E2330;
  --border:#262C3B;
  --border-soft:#1D2230;
  --text:#ECEEF3;
  --muted:#868FA3;
  --muted-2:#5A6377;
  --accent:#4C8DFF;
  --accent-dim:#3A6BC4;
  --live:#4FBE7E;
  --warn:#E85E5E;

  --tag-anime:#7C8CE8;
  --tag-beauty:#E88CA8;
  --tag-fitness:#4FB6A8;
  --tag-gaming:#5CA6E8;
  --tag-fiction:#C9A24B;

  --radius:6px;
  --font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
input, select, textarea{font-family:inherit;}
::selection{background:var(--accent); color:#0B0E14;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

/* ===== App shell ===== */
.app{display:grid; grid-template-columns:220px 1fr; min-height:100vh;}
.sidebar{
  background:var(--panel);
  border-right:1px solid var(--border);
  padding:22px 16px;
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
}
.brand{display:flex; align-items:center; gap:9px; padding:0 8px 26px 8px;}
.brand-mark{width:22px; height:22px; border-radius:5px; background:var(--accent); position:relative; flex-shrink:0;}
.brand-mark::after{content:""; position:absolute; inset:6px; border-radius:2px; background:var(--bg);}
.brand-name{font-weight:800; font-size:15.5px; letter-spacing:-0.01em;}

.nav{display:flex; flex-direction:column; gap:2px; flex:1;}
.nav-item{display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:var(--radius); color:var(--muted); font-size:14px; font-weight:600;}
.nav-item:hover{background:var(--panel-2); color:var(--text);}
.nav-item.active{background:var(--panel-2); color:var(--text); box-shadow:inset 2px 0 0 var(--accent);}

.nav-foot{border-top:1px solid var(--border); padding-top:14px; margin-top:14px; display:flex; align-items:center; gap:10px;}
.avatar{width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,var(--tag-anime),var(--tag-gaming)); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex-shrink:0; object-fit:cover;}
.nav-foot-name{font-size:13px; font-weight:700;}
.nav-foot-role{font-size:11.5px; color:var(--muted-2);}

.main{padding:26px 34px 60px 34px; max-width:1220px;}

.topline{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:14px;}
.page-title{font-size:22px; font-weight:800; letter-spacing:-0.01em;}
.page-sub{color:var(--muted); font-size:13.5px; margin-top:3px;}

.btn{display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:var(--radius); font-size:13.5px; font-weight:700; border:1px solid var(--border); background:var(--panel-2); color:var(--text); transition:border-color .15s ease;}
.btn:hover{border-color:var(--muted-2);}
.btn-accent{background:var(--accent); color:#0B0E14; border-color:var(--accent);}
.btn-accent:hover{background:#6aa0ff; border-color:#6aa0ff;}
.btn-ghost{background:transparent;}
.btn:disabled{opacity:.5; cursor:not-allowed;}

.panel{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);}

.tag{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; padding:3px 8px; border-radius:4px; background:var(--panel-2); border:1px solid var(--border);}
.tag-dot{width:6px; height:6px; border-radius:50%;}

.status{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700;}
.status-dot{width:7px; height:7px; border-radius:50%;}
.status-live .status-dot{background:var(--live); box-shadow:0 0 0 3px rgba(79,190,126,.18);}
.status-live{color:var(--live);}
.status-queued .status-dot{background:var(--accent);}
.status-queued{color:var(--accent);}
.status-failed .status-dot{background:var(--warn);}
.status-failed{color:var(--warn);}
.status-draft .status-dot{background:var(--muted-2);}
.status-draft{color:var(--muted);}

.platform-icon{width:18px; height:18px; border-radius:5px; display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; flex-shrink:0;}
.pi-tiktok{background:#0f0f10; color:#fff; border:1px solid #2c2c30;}
.pi-instagram{background:linear-gradient(135deg,#4f5bd5,#c93b93,#f2831e); color:#fff;}
.pi-youtube{background:#B4302F; color:#fff;}

/* ===== Flash messages ===== */
.flash{padding:11px 16px; border-radius:6px; font-size:13.5px; margin-bottom:16px; border:1px solid var(--border);}
.flash-success{background:rgba(79,190,126,.08); border-color:rgba(79,190,126,.3); color:var(--live);}
.flash-error{background:rgba(232,94,94,.08); border-color:rgba(232,94,94,.3); color:var(--warn);}

/* ===== Forms (shared) ===== */
.field{margin-bottom:18px;}
.field label{display:block; font-size:12.5px; font-weight:700; color:var(--muted); margin-bottom:8px;}
.field input[type=text], .field input[type=email], .field input[type=password], .field input[type=file], .field textarea, .field select{
  width:100%; padding:10px 12px; background:var(--bg); border:1px solid var(--border); border-radius:6px; color:var(--text); font-size:13.5px;
}
.field input:focus, .field textarea:focus, .field select:focus{outline:none; border-color:var(--accent);}
.field input[disabled]{color:var(--muted-2); cursor:not-allowed;}
.field .hint{font-size:11.5px; color:var(--muted-2); margin-top:6px;}

@media (max-width: 880px){
  .app{grid-template-columns:1fr;}
  .sidebar{position:relative; height:auto; flex-direction:row; align-items:center; padding:14px 16px;}
  .nav{flex-direction:row; overflow-x:auto;}
  .nav-foot{display:none;}
  .brand{padding-bottom:0;}
  .main{padding:20px 18px 50px 18px;}
}