* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --primary-gold: #FFD700; --dark-gold: #B8860B; --bg-dark: #0a0a0f; --bg-card: #12121a; --bg-card-hover: #1a1a2e;
  --text-primary: #fff; --text-secondary: #a0a0b0; --accent-cyan: #00d4ff; --accent-green: #00ff88; --accent-red: #ff4757;
  --accent-orange: #ffa502; --border-color: #2a2a3e; --glow-gold: 0 0 20px rgba(255,215,0,.3);
}
/* Tema terang (Putih) — dipilih lewat kontrol Tema (ui.js) */
html[data-theme="light"] {
  --primary-gold: #a8760a; --dark-gold: #8a6200; --bg-dark: #f3f4f7; --bg-card: #ffffff; --bg-card-hover: #f7f8fb;
  --text-primary: #161a2b; --text-secondary: #5a6072; --accent-cyan: #0b7fa3; --accent-green: #139a4b; --accent-red: #d42a3b;
  --accent-orange: #c77700; --border-color: #dfe2ea; --glow-gold: 0 4px 18px rgba(168,118,10,.18);
}
html[data-theme="light"] .header { background: rgba(255,255,255,.92); }
html[data-theme="light"] .tab:hover, html[data-theme="light"] input, html[data-theme="light"] select, html[data-theme="light"] textarea { color: var(--text-primary); }
html[data-theme="light"] .logo-fallback { color: #fff; }
html[data-theme="light"] .btn { color: #fff; }
/* tab aktif tema terang: latar emas + teks putih (sebelumnya teks putih di atas latar putih sehingga tak terbaca) */
html[data-theme="light"] .tab.active { background: var(--primary-gold); color: #fff; border-color: var(--dark-gold); }
html[data-theme="light"] .tab.active:hover { background: var(--dark-gold); color: #fff; }
html[data-theme="light"] .btn.ghost { color: var(--text-primary); }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: var(--bg-dark); color: var(--text-primary); min-height: 100vh; overflow-x: hidden; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at 20% 50%, rgba(255,215,0,.03), transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(0,212,255,.03), transparent 50%); }
:focus-visible { outline: 2px solid var(--primary-gold); outline-offset: 2px; border-radius: 4px; }
.header { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; padding: 14px 24px;
  background: rgba(10,10,15,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border-color); }
.header-left, .header-right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.logo-fallback { width: 64px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-weight: 800; letter-spacing: 1px; color: #111;
  background: linear-gradient(135deg, var(--primary-gold), var(--dark-gold)); box-shadow: var(--glow-gold); }
.header-title h1 { font-size: 1.25rem; color: var(--primary-gold); }
.header-title p { font-size: .8rem; color: var(--text-secondary); }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tab { background: var(--bg-card); color: var(--text-secondary); border: 1px solid var(--border-color); padding: 8px 14px; border-radius: 8px; cursor: pointer; font: inherit; font-size: .85rem; }
.tab:hover { background: var(--bg-card-hover); color: #fff; }
.tab.active { color: var(--primary-gold); border-color: var(--dark-gold); }
.user { font-size: .85rem; color: var(--text-secondary); padding: 6px 12px; border: 1px solid var(--border-color); border-radius: 999px; }
.container { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 24px; }
.panel { display: none; } .panel.active { display: block; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.dcard { display: block; text-decoration: none; color: inherit; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 22px; transition: .2s; position: relative; overflow: hidden; }
.dcard:hover { background: var(--bg-card-hover); border-color: var(--dark-gold); transform: translateY(-3px); box-shadow: var(--glow-gold); }
.dcard .ico { font-size: 2.2rem; margin-bottom: 10px; }
.dcard h3 { color: var(--primary-gold); font-size: 1.1rem; margin-bottom: 4px; }
.dcard p { color: var(--text-secondary); font-size: .85rem; min-height: 2.4em; }
.badge { display: inline-block; margin-top: 12px; font-size: .72rem; padding: 3px 10px; border-radius: 999px; border: 1px solid; }
.badge.edit { color: var(--accent-green); border-color: rgba(0,255,136,.4); } .badge.view { color: var(--accent-orange); border-color: rgba(255,165,2,.4); }
.muted { color: var(--text-secondary); font-size: .85rem; margin-top: 14px; }
.bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
input, select { background: var(--bg-card); color: #fff; border: 1px solid var(--border-color); border-radius: 8px; padding: 8px 12px; font: inherit; font-size: .85rem; }
.btn { background: linear-gradient(135deg, var(--primary-gold), var(--dark-gold)); color: #111; font-weight: 700; border: 0; border-radius: 8px; padding: 8px 16px; cursor: pointer; font-size: .85rem; }
.btn.ghost { background: transparent; color: #fff; border: 1px solid var(--border-color); } .btn.danger { background: var(--accent-red); color: #fff; } .btn.sm { padding: 4px 10px; font-size: .78rem; }
.card-box { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: .85rem; }
th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border-color); vertical-align: top; }
th { color: var(--primary-gold); font-weight: 600; white-space: nowrap; }
.chip { display: inline-block; margin: 2px 4px 2px 0; padding: 2px 8px; border-radius: 999px; font-size: .72rem; background: var(--bg-card-hover); border: 1px solid var(--border-color); }
.chip.edit { border-color: rgba(0,255,136,.5); } .chip.view { border-color: rgba(255,165,2,.5); }
.adres { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .adres button { cursor: pointer; }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: none; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.modal.show { display: flex; }
.modal-box { background: var(--bg-card); border: 1px solid var(--dark-gold); border-radius: 14px; padding: 22px; width: min(640px, 100%); max-height: 90vh; overflow: auto; }
.modal-box h3 { color: var(--primary-gold); margin-bottom: 14px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.row { display: flex; align-items: center; gap: 10px; margin: 6px 0; flex-wrap: wrap; } .row label { min-width: 190px; }
.access-grid { display: grid; grid-template-columns: 1fr 150px; gap: 6px 12px; align-items: center; margin-top: 10px; }
.toast { position: fixed; bottom: 20px; right: 20px; background: var(--bg-card); border: 1px solid var(--dark-gold); padding: 10px 16px; border-radius: 10px; opacity: 0; transition: .3s; z-index: 60; pointer-events: none; }
.toast.show { opacity: 1; } .toast.err { border-color: var(--accent-red); }
@media (max-width: 640px) { .header, .container { padding: 12px; } .row label { min-width: 100%; } }