:root{
  --paper:#ffffff;
  --paper-deep:#f4f4f2;
  --ink:#18150f;
  --ink-soft:#7d7767;
  --ink-faint:#a39d8c;
  --rule:#e2e0da;
  --rule-soft:#ececea;
  --mono:'JetBrains Mono', monospace;
  --sans:'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
}
*{box-sizing:border-box;}
body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; }
a{ color:inherit; }

.top{ max-width:920px; margin:0 auto; padding:26px 32px 0; display:flex; align-items:center; justify-content:space-between; }
.top .brand{ font-weight:500; font-size:15px; }
.top a.out{ font-family:var(--mono); font-size:11px; color:var(--ink-soft); text-decoration:none; border-bottom:1px solid transparent; }
.top a.out:hover{ color:var(--ink); border-bottom-color:var(--ink); }

/* --- login page --- */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:32px; }
.login-card{ width:100%; max-width:340px; text-align:center; }
.login-card h1{ font-weight:500; font-size:22px; margin:0 0 6px; }
.login-card p.sub{ color:var(--ink-soft); font-size:13.5px; margin:0 0 28px; }
.login-card input[type=password]{
  width:100%; border:1px solid var(--rule); background:var(--paper-deep); padding:12px 14px;
  font-size:15px; color:var(--ink); border-radius:4px; text-align:center; letter-spacing:2px;
}
.login-card button{
  margin-top:14px; width:100%; font-family:var(--mono); font-size:11.5px; letter-spacing:1.2px; text-transform:uppercase;
  background:var(--ink); color:var(--paper); border:none; padding:13px 20px; border-radius:4px; cursor:pointer;
}
.login-card button:hover{ background:#2c2818; }
.login-card .err{ color:#a33; font-size:13px; margin-top:14px; }

/* --- studio dashboard --- */
.studio{ max-width:920px; margin:0 auto; padding:30px 32px 110px; }
.studio-head{ margin-bottom:34px; }
.studio-head .tag{ font-family:var(--mono); font-size:11px; letter-spacing:1.5px; color:var(--ink-faint); text-transform:uppercase; }
.studio-head h1{ font-weight:500; font-size:28px; margin:10px 0 8px; }
.studio-head p{ color:var(--ink-soft); font-size:14px; max-width:60ch; line-height:1.6; margin:0; }

.flash{ font-size:13.5px; padding:12px 16px; border-radius:4px; margin-bottom:22px; }
.flash.ok{ background:#eef6ee; color:#2c5f2c; }
.flash.err{ background:#fbeceb; color:#a33; }
.flash ul{ margin:6px 0 0; padding-left:18px; }

.dropzone{ border:1.5px dashed var(--rule); border-radius:6px; background:var(--paper-deep); padding:36px 24px; text-align:center; margin-bottom:26px; }
.dropzone .t1{ font-size:16px; margin-bottom:6px; }
.dropzone .t2{ font-family:var(--mono); font-size:11px; color:var(--ink-soft); }
.dropzone input[type=file]{ margin-top:14px; font-size:13px; }
.dropzone.drag{ border-color:var(--ink); background:#eef0ee; }

.form-card{ background:var(--white,#fff); border:1px solid var(--rule-soft); border-radius:6px; padding:26px; margin-bottom:50px; }
.form-row{ margin-bottom:18px; }
.form-row label{ font-family:var(--mono); font-size:10px; letter-spacing:1.2px; text-transform:uppercase; color:var(--ink-soft); display:block; margin-bottom:7px; }
.form-row input[type=text], .form-row textarea, .form-row select{
  width:100%; border:1px solid var(--rule); background:var(--paper); padding:10px 11px; font-size:13.5px; color:var(--ink); border-radius:3px; resize:vertical; font-family:var(--sans);
}
.form-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media(max-width:600px){ .form-grid2{ grid-template-columns:1fr; } }
.form-actions{ display:flex; justify-content:space-between; align-items:center; margin-top:24px; gap:16px; flex-wrap:wrap; }
.form-actions .note{ font-family:var(--mono); font-size:10px; color:var(--ink-soft); max-width:50ch; }
.btn-publish{ font-family:var(--mono); font-size:11px; letter-spacing:1.2px; text-transform:uppercase; background:var(--ink); color:var(--paper); border:none; padding:12px 24px; border-radius:2px; cursor:pointer; }
.btn-publish:hover{ background:#2c2818; }

.manage-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:18px; }
.manage-head h2{ font-weight:500; font-size:18px; margin:0; }
.manage-head span{ font-family:var(--mono); font-size:11px; color:var(--ink-faint); }

.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:14px; }
.card{ border:1px solid var(--rule-soft); border-radius:6px; overflow:hidden; background:var(--paper-deep); }
.card img{ width:100%; height:110px; object-fit:cover; display:block; }
.card .meta{ padding:9px 10px 11px; }
.card .meta .t{ font-size:12.5px; font-weight:500; line-height:1.3; margin-bottom:2px; }
.card .meta .l{ font-size:11px; color:var(--ink-soft); margin-bottom:8px; }
.card .meta .role{ display:inline-block; font-family:var(--mono); font-size:9.5px; color:var(--ink-faint); border:1px solid var(--rule); border-radius:10px; padding:2px 8px; margin-bottom:8px; }
.card form{ margin:0; }
.card button.del{ font-family:var(--mono); font-size:10px; color:#a33; background:none; border:none; cursor:pointer; padding:0; }
.card button.del:hover{ text-decoration:underline; }