/* Warna utama. Bisa diubah melalui SIAPKAN-HOSTING.html. */
:root { --brand-primary: #245d84; --brand-accent: #dfb52b; --app-background: #f5f7f9; }
body { background: var(--app-background); }
.button.primary, .nav-item.active { background: var(--brand-primary); border-color: var(--brand-primary); }
.button.primary:hover { background: var(--brand-primary); filter: brightness(.9); border-color: var(--brand-primary); }
.nav-item.active { color: #fff; border-left-color: var(--brand-accent); }
.brand-dot { color: var(--brand-accent); }
.document-strip { border-left-color: var(--brand-accent); }
.account-actions { display: flex; gap: 14px; padding: 0 2px 20px; }
.account-actions button { border: 0; background: transparent; padding: 0; font-size: 10px; color: #6d8292; }
.account-actions button:hover { color: var(--brand-primary); text-decoration: underline; }
.workspace-label { padding-bottom: 13px; }
.auth-panel { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--app-background); }
.auth-card { width: min(100%, 420px); padding: 36px; background: #fff; border: 1px solid #dce2e6; border-top: 4px solid var(--brand-accent); border-radius: 4px; }
.auth-brand { display: flex; align-items: center; gap: 15px; padding-bottom: 28px; }
.auth-brand img { height: 46px; width: 36px; object-fit: contain; }
.auth-brand strong { display: block; font-size: 24px; letter-spacing: 1px; color: var(--brand-primary); }
.auth-brand span { display: block; font-size: 11px; color: #6c8190; }
.auth-card h1 { font-size: 23px; font-weight: 600; margin: 0 0 10px; color: #263f51; }
.auth-card > p { font-size: 12px; color: #748693; line-height: 1.7; }
.auth-card form { margin-top: 27px; }
.auth-card .field { margin-bottom: 19px; }
.auth-card input { width: 100%; }
.auth-help { margin-top: 20px; font-size: 11px; color: #84939d; line-height: 1.7; }
.auth-card .field-error { margin-bottom: 16px; }
body:not([data-auth-state="ready"]) > .sidebar,
body:not([data-auth-state="ready"]) > .app-shell { display: none; }
body[data-auth-state="ready"] > .auth-panel { display: none; }
@media (max-width:740px) {
  .nav-item.active { border-bottom-color: var(--brand-accent); border-left: 0; }
  .sidebar { flex-wrap: wrap; row-gap: 8px; }
  .account-actions { position: static; justify-content: flex-end; padding: 0 0 2px; gap: 16px; }
  .account-actions button { font-size: 9px; }
  .sidebar-bottom { display: block; width: 100%; margin: 0; padding: 0; }
  .sidebar-bottom .guide-button, .sidebar-bottom .workspace-label { display: none; }
  .auth-card { padding: 27px; }
  .archive-toolbar { flex-wrap: wrap; }
}