:root{
  --bg-deep:#0A1310;
  --panel:rgba(255,255,255,0.045);
  --panel-strong:rgba(255,255,255,0.08);
  --line:rgba(255,255,255,0.12);
  --line-soft:rgba(255,255,255,0.07);
  --lime:#CFE83A;
  --lime-soft:#E4F37A;
  --teal:#1FB894;
  --teal2:#19B894;
  --teal-deep:#0F6E56;
  --gold:#E8B84B;
  --sogan:#D98A4E;
  --coral:#FF7A63;
  --ink:#F3F8F4;
  --ink-soft:#A9BDB3;
  --ink-faint:#7C9088;
  --good:#7FE0C0;
  --bad:#FF9A8C;
  --mono:'IBM Plex Mono', monospace;
  --sans:'Inter', system-ui, sans-serif;
  --display:'Space Grotesk', sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:radial-gradient(circle at 20% 0%, #102420 0%, var(--bg-deep) 55%, #060B09 100%);
  color:var(--ink); font-family:var(--sans); min-height:100vh; -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
.display{font-family:var(--display);}
.mono{font-family:var(--mono);}

/* Ambient lively background */
.blob{position:fixed; border-radius:50%; filter:blur(80px); opacity:0.32; z-index:0; pointer-events:none; transition:transform .6s ease-out;}
.blob1{width:560px;height:560px; background:radial-gradient(circle, var(--teal2), transparent 70%); top:-180px; left:-140px;}
.blob2{width:480px;height:480px; background:radial-gradient(circle, var(--lime), transparent 70%); top:25%; right:-200px;}
.blob3{width:420px;height:420px; background:radial-gradient(circle, var(--gold), transparent 70%); bottom:-180px; left:15%;}
.noise{position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* Batik-inspired diagonal motif, recolored for dark theme — signature accent */
.motif-strip{
  position:relative; z-index:2; height:14px;
  background:
    repeating-linear-gradient(45deg, var(--gold) 0px, var(--gold) 3px, transparent 3px, transparent 16px),
    var(--teal-deep);
}
.motif-bg{
  position:relative;
  background-image:
    repeating-linear-gradient(45deg, rgba(232,184,75,0.06) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(-45deg, rgba(31,184,148,0.06) 0 2px, transparent 2px 26px);
}

/* Topbar */
.topbar{
  position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between;
  padding:18px 28px; flex-wrap:wrap; gap:14px; border-bottom:1px solid var(--line-soft);
  background:rgba(10,19,16,0.55); backdrop-filter:blur(10px);
}
.brand{display:flex; align-items:center; gap:14px;}
.logo-halo{
  width:54px; height:54px; border-radius:16px; background:var(--panel-strong); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  box-shadow:0 14px 32px -12px rgba(0,0,0,0.65), 0 0 36px -6px rgba(207,232,58,0.35);
}
.logo-halo img, .brand-mark{width:36px; height:36px; object-fit:contain; border-radius:8px;}
.brand-name, .brand h1{font-size:19px; font-weight:700; margin:0; font-family:var(--display); letter-spacing:-0.01em; color:var(--ink);}
.brand-sub, .brand .sub{font-size:12px; color:var(--ink-faint); font-family:var(--mono); letter-spacing:0.03em; margin-top:2px;}
.top-right, .userbox{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.clock{font-size:13px; color:var(--ink-soft); text-align:right;}
.clock b{color:var(--ink); font-size:14px; font-family:var(--mono);}
.avatar{
  width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg, var(--sogan), var(--gold));
  color:#1C1404; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px;
  font-family:var(--display); border:2px solid rgba(255,255,255,0.15);
}
.topnav-link{
  font-size:12.5px; font-weight:600; color:var(--ink); border:1px solid var(--line); border-radius:999px;
  padding:8px 15px; background:var(--panel-strong); transition:all .15s ease;
}
.topnav-link:hover{border-color:rgba(255,255,255,0.25); transform:translateY(-1px);}

/* Hero */
.hero{position:relative; z-index:2; color:#fff; padding:54px 40px 42px; overflow:hidden;}
.hero-inner{position:relative; z-index:2; max-width:1180px; margin:0 auto;}
.eyebrow{font-size:12px; color:var(--lime-soft); text-transform:uppercase; letter-spacing:0.14em; font-family:var(--mono); margin-bottom:16px;}
.hero h1{font-size:40px; font-weight:700; margin:0 0 12px; line-height:1.12; font-family:var(--display); letter-spacing:-0.015em;
  background:linear-gradient(100deg, #fff, var(--lime-soft) 60%); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero p{font-size:15.5px; color:var(--ink-soft); max-width:540px; margin:0 0 30px; line-height:1.65;}
.stat-row{display:flex; gap:16px; flex-wrap:wrap;}
.stat-chip{
  background:linear-gradient(160deg, var(--panel-strong), var(--panel)); border:1px solid var(--line);
  border-radius:16px; padding:16px 20px; min-width:150px;
  box-shadow:0 16px 36px -16px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
  transform-style:preserve-3d; transition:transform .25s ease, box-shadow .25s ease;
}
.stat-chip .num{font-family:var(--display); font-size:26px; font-weight:700; color:#fff;}
.stat-chip .lbl{font-size:12px; color:var(--ink-faint); margin-top:3px;}
.stat-chip.alert .num{background:linear-gradient(90deg, var(--lime-soft), var(--lime)); -webkit-background-clip:text; background-clip:text; color:transparent;}

/* Main layout */
.main{position:relative; z-index:2; max-width:1180px; margin:0 auto; padding:36px 40px 60px; display:grid; grid-template-columns:1.6fr 1fr; gap:28px;}
.section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px;}
.section-head h2{font-size:18px; margin:0; font-weight:700; font-family:var(--display);}
.section-head a{font-size:12px; color:var(--lime-soft); font-weight:600;}

/* Announcements */
.ann-card{
  background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:18px 20px;
  margin-bottom:12px; display:flex; gap:14px; transition:transform .15s ease, border-color .15s ease;
}
.ann-tag{flex-shrink:0; width:6px; border-radius:4px; background:var(--sogan);}
.ann-card.pin .ann-tag{background:var(--gold);}
.ann-meta{font-size:11px; color:var(--ink-faint); margin-bottom:4px; font-family:var(--mono);}
.ann-title{font-size:14.5px; font-weight:700; margin:0 0 4px; color:var(--ink);}
.ann-body{font-size:13px; color:var(--ink-soft); line-height:1.55; margin:0;}
a.ann-card{cursor:pointer;}
a.ann-card:hover{transform:translateY(-2px); border-color:rgba(255,255,255,0.2);}

/* Quick access tiles */
.tiles{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:30px;}
.tile{
  background:linear-gradient(160deg, var(--panel-strong), var(--panel)); border:1px solid var(--line);
  border-radius:16px; padding:17px; display:flex; flex-direction:column; gap:10px;
  transform-style:preserve-3d; transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  box-shadow:0 14px 32px -16px rgba(0,0,0,0.55);
}
.tile:hover{border-color:rgba(255,255,255,0.22); box-shadow:0 20px 44px -16px rgba(0,0,0,0.65);}
.tile-icon{width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:17px; color:#0C1A15;}
.tile-title{font-size:13.5px; font-weight:700; color:var(--ink);}
.tile-sub{font-size:11px; color:var(--ink-faint);}

/* Agenda */
.agenda-item{display:flex; gap:12px; padding:11px 0; border-bottom:1px solid var(--line-soft);}
.agenda-item:last-child{border-bottom:none;}
.agenda-time{font-family:var(--mono); font-size:12px; color:var(--lime-soft); min-width:48px;}
.agenda-title{font-size:13px; font-weight:600; color:var(--ink);}
.agenda-room{font-size:11.5px; color:var(--ink-faint);}

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

/* Contacts */
.contacts{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;}
.contact-pill{display:flex; align-items:center; gap:8px; background:var(--panel-strong); border:1px solid var(--line);
  border-radius:999px; padding:7px 13px 7px 8px; font-size:12px; font-weight:500; color:var(--ink);}
.contact-pill .dot{width:8px; height:8px; border-radius:50%; background:var(--good);}

/* Footer */
.footer{position:relative; z-index:2; color:#cfe0d8; padding:30px 40px 26px;}
.footer-inner{max-width:1180px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;}
.footer h3{margin:0 0 4px; font-size:16px; color:#fff; font-family:var(--display);}
.footer p{margin:0; font-size:12.5px; color:var(--ink-faint);}
.footer-cta{background:linear-gradient(135deg, var(--lime), var(--teal2)); color:#06251D; padding:11px 19px;
  border-radius:10px; font-size:13px; font-weight:700; display:inline-flex; align-items:center; gap:8px;
  box-shadow:0 10px 26px -8px rgba(207,232,58,0.45);}

@media (max-width:880px){
  .main{grid-template-columns:1fr; padding:28px 20px 50px;}
  .topbar{padding:14px 20px;}
  .hero{padding:36px 20px 32px;}
  .hero h1{font-size:28px;}
  .tiles{grid-template-columns:1fr 1fr;}
  .footer-inner{flex-direction:column; align-items:flex-start;}
}

/* ===== TOAST (auto-fading notification) ===== */
.toast{
  position:fixed; top:26px; left:50%; transform:translate(-50%,-12px);
  background:rgba(15,20,17,0.85); backdrop-filter:blur(4px); border:1px solid var(--line);
  color:#fff; padding:11px 20px; border-radius:999px; max-width:88vw; text-align:center;
  font-size:13px; font-weight:500; box-shadow:0 12px 30px rgba(0,0,0,0.4);
  z-index:200; opacity:0; pointer-events:none;
  animation:toastFade 3s ease forwards;
}
.toast b{color:var(--gold);}
@keyframes toastFade{
  0%{opacity:0; transform:translate(-50%,-12px);}
  10%{opacity:1; transform:translate(-50%,0);}
  82%{opacity:1; transform:translate(-50%,0);}
  100%{opacity:0; transform:translate(-50%,-8px);}
}

/* ===== Role switch tabs (Karyawan / Admin) ===== */
.role-switch{display:flex; gap:6px; background:rgba(0,0,0,0.25); border:1px solid var(--line); border-radius:999px; padding:4px; margin-bottom:20px;}
.role-switch a{flex:1; text-align:center; padding:10px 14px; border-radius:999px; font-size:13px; font-weight:700; color:var(--ink-faint); transition:all .15s ease;}
.role-switch a.active{background:linear-gradient(135deg, var(--lime), var(--teal2)); color:#06251D;}
.role-switch a:not(.active):hover{background:rgba(255,255,255,0.06); color:var(--ink);}

/* ===== Login screens ===== */
.login-wrap{position:relative; z-index:2; min-height:78vh; display:flex; align-items:center; justify-content:center; padding:36px 16px;}
.login-card{
  background:linear-gradient(160deg, var(--panel-strong), var(--panel)); border:1px solid var(--line);
  border-radius:22px; padding:38px 32px; width:100%; max-width:400px; text-align:center;
  box-shadow:0 30px 70px -20px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.05);
}
.login-card .logo-halo{margin:0 auto 18px; width:72px; height:72px; border-radius:20px;}
.login-card .logo-halo img{width:48px; height:48px;}
.login-card h1, .login-card h2{font-size:22px; margin:0 0 6px; font-family:var(--display); font-weight:700;}
.login-card p{font-size:13px; color:var(--ink-faint); margin:0 0 22px;}
.login-card .field{text-align:left;}
.error-text{color:var(--bad); font-size:12.5px; margin:0 0 14px;}

/* ===== Generic form/button elements (used across admin panel etc.) ===== */
.admin-wrap{position:relative; z-index:2; max-width:920px; margin:0 auto; padding:32px 24px 70px;}
.admin-section{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:22px; margin-bottom:22px;}
.admin-section h2{font-size:16px; margin:0 0 4px; font-family:var(--display);}
.admin-hint{font-size:12px; color:var(--ink-faint); margin:0 0 16px;}
.admin-row{display:grid; gap:10px; background:rgba(255,255,255,0.03); border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:10px; position:relative;}
.admin-row label{font-size:11px; color:var(--ink-faint); display:block; margin-bottom:3px; font-weight:600;}
.admin-row input[type=text], .admin-row input[type=time], .admin-row textarea, .login-card input, .field input, .field select{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:9px;
  font-family:var(--sans); font-size:14px; background:rgba(0,0,0,0.25); color:var(--ink);
}
.admin-row input::placeholder, .login-card input::placeholder, .field input::placeholder{color:var(--ink-faint);}
.admin-row input:focus, .login-card input:focus, .field input:focus{outline:none; border-color:var(--teal2); box-shadow:0 0 0 3px rgba(31,184,148,0.18);}
.admin-row textarea{resize:vertical; min-height:54px;}
.admin-grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.admin-grid3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px;}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:0;}

.btn{
  display:inline-flex; align-items:center; gap:6px; border:none; border-radius:10px; padding:11px 18px;
  font-size:13px; font-weight:700; cursor:pointer; font-family:var(--sans); transition:all .15s ease;
}
.btn-primary{background:linear-gradient(135deg, var(--lime), var(--teal2)); color:#06251D; box-shadow:0 10px 26px -8px rgba(207,232,58,0.45);}
.btn-primary:hover{transform:translateY(-2px) scale(1.01); box-shadow:0 14px 32px -8px rgba(207,232,58,0.6);}
.btn-add{background:rgba(232,184,75,0.18); color:var(--gold); border:1px solid rgba(232,184,75,0.4);}
.btn-add:hover{background:rgba(232,184,75,0.28);}
.btn-remove{background:rgba(255,122,99,0.12); color:var(--bad); border:1px solid rgba(255,122,99,0.35); padding:6px 11px; font-size:12px;}
.btn-remove:hover{background:rgba(255,122,99,0.22);}
.row-actions{margin-top:10px; text-align:right;}
.admin-toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px;}
.flash{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:9999; background:rgba(255,255,255,0.18); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(127,224,192,0.5);
  color:var(--good); padding:20px 30px; border-radius:14px; font-size:14px; font-weight:700;
  box-shadow:0 30px 70px -20px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.4); max-width:min(420px, 90vw); text-align:center;
  animation:flashPop .3s cubic-bezier(.2,.9,.3,1.3), flashOut .3s ease 2.6s forwards;
}
@keyframes flashPop{from{opacity:0; transform:translate(-50%,-50%) scale(0.85);} to{opacity:1; transform:translate(-50%,-50%) scale(1);}}
@keyframes flashOut{to{opacity:0; transform:translate(-50%,-50%) scale(0.9);}}

@media print{.no-print{display:none !important;}}