:root{
  --bg:#f4efec;
  --surface:#ffffff;
  --surface-alt:#f4e9e4;
  --ink:#2e2b29;
  --muted:#7a716b;
  --line:#d8cdc6;
  --line-soft:#e9e1db;
  --accent:#c1392b;
  --accent-ink:#ffffff;
  --mark:#9c6b1f;
  --status-draft:#8a8078;
  --status-scheduled:#3b6fa0;
  --status-published:#3f8f5f;
  --status-failed:#a8443a;
  --focus:#3b6fa0;
  --font-ui: -apple-system, "Segoe UI", "Inter", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "SF Mono", "JetBrains Mono", Consolas, monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#1c232b;
    --surface:#262b32;
    --surface-alt:#2e3036;
    --ink:#eceef0;
    --muted:#98a0a8;
    --line:#4c4b4e;
    --line-soft:#35363b;
    --accent:#e2624f;
    --accent-ink:#2b0f09;
    --mark:#d9a34c;
    --status-draft:#98a0a8;
    --status-scheduled:#6ea3d8;
    --status-published:#66b98a;
    --status-failed:#d4695a;
    --focus:#6ea3d8;
  }
}

*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-ui); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{text-wrap:balance; margin:0;}
a{color:inherit;}
button{font-family:inherit; cursor:pointer;}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}
@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important;} }

.app{ display:flex; min-height:100vh; }

/* ---- Rail ---- */
.rail{
  width:216px; flex:none; background:var(--surface); border-right:1px solid var(--line-soft);
  display:flex; flex-direction:column; padding:20px 0;
}
.rail-head{ padding:0 18px 16px; border-bottom:1px solid var(--line-soft); margin-bottom:14px; }
.rail-head .kicker{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); font-weight:600; display:flex; align-items:center; gap:6px;
}
.rail-head h1{ font-size:17px; margin-top:4px; font-weight:700; }
.sun{ color:var(--accent); flex:none; }
.rail-group-label{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); padding:12px 18px 6px;
}
.rail-item{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:8px 18px;
  background:none; border:none; color:var(--ink); font-size:13.5px; border-left:2px solid transparent;
  text-decoration:none;
}
.rail-item:hover{ background:var(--surface-alt); }
.rail-item.active{ background:var(--surface-alt); border-left-color:var(--ink); font-weight:600; }
.rail-item .dot{ width:6px; height:6px; border-radius:50%; background:var(--line); flex:none; }
.rail-item.active .dot{ background:var(--ink); }
.rail-item .admin-tag{
  margin-left:auto; font-family:var(--font-mono); font-size:9.5px; color:var(--muted);
  border:1px solid var(--line); border-radius:3px; padding:1px 4px;
}
.rail-foot{ margin-top:auto; padding:14px 18px 0; border-top:1px solid var(--line-soft); }
.rail-foot .who{ font-size:12.5px; margin-bottom:8px; }
.rail-foot .who .role{ color:var(--muted); font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; }

/* ---- Canvas ---- */
.canvas{ flex:1; min-width:0; padding:28px 36px 60px; }
.canvas-head{ display:flex; align-items:baseline; gap:12px; margin-bottom:4px; flex-wrap:wrap; }
.canvas-head h2{ font-size:22px; font-weight:700; }
.canvas-head .stamp{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink); background:var(--surface-alt); border:1px solid var(--line); padding:2px 7px; border-radius:3px; font-weight:700;
}
.canvas-sub{ color:var(--muted); font-size:13px; margin-bottom:22px; max-width:64ch; }

.mock{
  background:var(--surface); border:1px solid var(--line); border-radius:6px;
  padding:20px; overflow-x:auto;
}

.flash{ border-radius:6px; padding:10px 14px; font-size:13.5px; margin-bottom:18px; }
.flash-success{ background:color-mix(in srgb, var(--status-published) 16%, transparent); color:var(--status-published); border:1px solid color-mix(in srgb, var(--status-published) 40%, transparent); }
.flash-error{ background:color-mix(in srgb, var(--status-failed) 16%, transparent); color:var(--status-failed); border:1px solid color-mix(in srgb, var(--status-failed) 40%, transparent); }
.field-error{ color:var(--status-failed); font-size:12.5px; margin-top:4px; }

label.f-label{ font-family:var(--font-mono); font-size:11px; color:var(--muted); margin-bottom:5px; letter-spacing:.02em; display:block; }
.f-input, select.f-input, textarea.f-input{
  border:1px solid var(--line); border-radius:4px; background:var(--surface);
  padding:9px 11px; font-size:13.5px; color:var(--ink); width:100%; font-family:inherit;
}
textarea.f-input{ resize:vertical; }
.f-group{ margin-bottom:16px; }

.btn{ border-radius:4px; padding:8px 14px; font-size:13px; font-weight:600; border:1px solid transparent; display:inline-flex; align-items:center; gap:6px; }
.btn-primary{ background:var(--accent); color:var(--accent-ink); }
.btn-ghost{ background:var(--surface); border:1px solid var(--line); color:var(--ink); }

.badge{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.03em; text-transform:uppercase;
  padding:2px 7px; border-radius:3px; font-weight:700; white-space:nowrap; display:inline-block;
}
.badge-draft{ background:color-mix(in srgb, var(--status-draft) 22%, transparent); color:var(--status-draft); }
.badge-scheduled{ background:color-mix(in srgb, var(--status-scheduled) 22%, transparent); color:var(--status-scheduled); }
.badge-publishing{ background:color-mix(in srgb, var(--status-scheduled) 22%, transparent); color:var(--status-scheduled); }
.badge-published{ background:color-mix(in srgb, var(--status-published) 22%, transparent); color:var(--status-published); }
.badge-failed{ background:color-mix(in srgb, var(--status-failed) 22%, transparent); color:var(--status-failed); }
.badge-connected{ background:color-mix(in srgb, var(--status-published) 22%, transparent); color:var(--status-published); }
.badge-expired{ background:color-mix(in srgb, var(--status-failed) 22%, transparent); color:var(--status-failed); }
.badge-revoked{ background:color-mix(in srgb, var(--status-draft) 22%, transparent); color:var(--status-draft); }
.badge-admin{ background:color-mix(in srgb, var(--status-scheduled) 22%, transparent); color:var(--status-scheduled); }
.badge-karyawan{ background:color-mix(in srgb, var(--status-draft) 22%, transparent); color:var(--status-draft); }

table{ border-collapse:collapse; width:100%; min-width:640px; font-size:13px; }
th{ text-align:left; font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:600; padding:8px 10px; border-bottom:1px solid var(--line); }
td{ padding:10px; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
.row-actions{ display:flex; gap:6px; }
.row-actions button, .row-actions a{ font-size:11px; padding:4px 9px; }
.table-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; gap:12px; flex-wrap:wrap; }

.target-list{ display:flex; flex-direction:column; gap:8px; }
.check-row{ display:flex; align-items:center; gap:9px; font-size:13px; }
.check-row input{ accent-color:var(--mark); width:14px; height:14px; }

.cal{ display:grid; grid-template-columns:repeat(7,minmax(110px,1fr)); border-left:1px solid var(--line-soft); border-top:1px solid var(--line-soft); min-width:780px; }
.cal-h{ font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; color:var(--muted); padding:8px; border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); background:var(--surface-alt); }
.cal-d{ min-height:130px; padding:8px; border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); font-size:11px; color:var(--muted); display:flex; flex-direction:column; gap:5px; }
.cal-d.other-month{ opacity:.4; }
.cal-d .dnum{ font-family:var(--font-mono); display:inline-flex; align-items:center; justify-content:center; }
.cal-d.today .dnum{ background:var(--accent); color:var(--accent-ink); width:20px; height:20px; border-radius:50%; font-weight:700; }
.cal-nav{ display:flex; align-items:center; gap:10px; }
.cal-nav .btn-icon{ width:30px; height:30px; padding:0; display:inline-flex; align-items:center; justify-content:center; }
.cal-nav .today-link{ font-size:12.5px; color:var(--muted); text-decoration:none; }
.cal-nav .today-link:hover{ color:var(--ink); }
.post-card{ display:block; background:var(--surface); border:1px solid var(--line-soft); border-left:3px solid var(--status-scheduled); border-radius:5px; padding:4px 7px; text-decoration:none; color:var(--ink); }
.post-card.status-published{ border-left-color:var(--status-published); }
.post-card.status-failed{ border-left-color:var(--status-failed); }
.post-card.status-draft{ border-left-color:var(--status-draft); }
.post-card .time{ font-family:var(--font-mono); font-weight:700; font-size:11px; display:flex; align-items:center; gap:5px; }
.post-card .snippet{ font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }

/* ---- Login ---- */
.login-page{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg); }
.login-card{ width:100%; max-width:360px; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:32px 28px; }
.login-logo{ display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:22px; }
.login-logo .wordmark{ font-weight:800; font-size:16px; letter-spacing:.02em; }
.login-logo .sub{ font-family:var(--font-mono); font-size:10.5px; color:var(--muted); letter-spacing:.05em; text-transform:uppercase; }
.login-card form{ display:flex; flex-direction:column; gap:16px; }
.login-card .btn-primary{ justify-content:center; padding:10px 14px; }