/* Premium PA Denpasar Apps - PHP 5.6 backend compatible */
:root{
  --green:#075b36;
  --green-2:#0b7a48;
  --gold:#d6ad36;
  --gold-light:#f5df88;
  --ink:#15221c;
  --muted:#6f7d76;
  --cream:#f7f4ea;
  --card:#ffffff;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(ellipse at 8% 4%, rgba(214,173,54,.16), transparent 26%),
    radial-gradient(ellipse at 92% 12%, rgba(7,91,54,.14), transparent 30%),
    radial-gradient(ellipse at 55% 80%, rgba(214,173,54,.08), transparent 34%),
    linear-gradient(145deg,#fbfaf5 0%,#f3f7f4 45%,#f8f5ea 100%);
  min-height:100vh;
}
body:before{
  content:"";
  position:fixed;inset:0;pointer-events:none;opacity:.23;
  background-image:linear-gradient(rgba(7,91,54,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(7,91,54,.035) 1px,transparent 1px);
  background-size:34px 34px;
}
a{text-decoration:none}
.navbar-premium{
  background:linear-gradient(115deg,#043a26 0%,#075b36 48%,#087248 100%);
  border-bottom:1px solid rgba(245,223,136,.30);
  position:sticky;top:0;z-index:1000;
  box-shadow:0 10px 32px rgba(4,54,35,.20);
}
.navbar-premium:after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,#d8b94c,#ffe79a,#d8b94c,transparent);
  opacity:.85;
}
.header-layout{
  display:grid;grid-template-columns:minmax(300px,1fr) minmax(280px,520px) auto;
  align-items:center;gap:24px;
}
.brand-mark{
  height:56px;width:56px;object-fit:contain;
  filter:drop-shadow(0 5px 10px rgba(0,0,0,.18));
}
.brand-copy{min-width:0}
.brand-title{font-weight:800;letter-spacing:-.2px;color:#fff;font-size:18px}
.brand-sub{
  font-size:9px;letter-spacing:1px;color:rgba(255,255,255,.68);
  text-transform:uppercase;margin-top:4px;white-space:nowrap;
}
.header-search{
  max-width:none;width:100%;height:48px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 24px rgba(0,0,0,.08);
}
.header-search:focus-within{
  background:rgba(255,255,255,.98);
  border-color:rgba(245,223,136,.85);
  box-shadow:0 10px 30px rgba(0,0,0,.14);
}
.header-search>i{color:rgba(255,255,255,.82)}
.header-search:focus-within>i{color:#075b36}
.header-search input{
  color:#fff;background:transparent;border:0;outline:0;
  box-shadow:none!important;padding:10px 12px;
}
.header-search input::placeholder{color:rgba(255,255,255,.72)}
.header-search:focus-within input{color:#18362a}
.header-search:focus-within input::placeholder{color:#8b9791}
.search-shell input{border:0;outline:0;box-shadow:none!important}
.search-shortcut{
  font-size:10px;color:rgba(255,255,255,.70);
  background:rgba(0,0,0,.14);border-radius:8px;padding:6px 8px;margin-right:8px;
}
.header-search:focus-within .search-shortcut{color:#6f7d76;background:#f2f5f2}
.header-status{
  font-size:10px;font-weight:700;color:rgba(255,255,255,.84);
  border:1px solid rgba(255,255,255,.17);padding:8px 11px;
  border-radius:99px;background:rgba(255,255,255,.08);
}
.status-dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:#8ee1b0;margin-right:6px;
  box-shadow:0 0 0 4px rgba(142,225,176,.10);
}
.btn-header{
  color:#0b4f31;background:#f4d66f;border:1px solid #f8df93;
  font-weight:800;font-size:12px;box-shadow:0 5px 16px rgba(0,0,0,.12);
}
.btn-header:hover{color:#073d27;background:#ffe18a;border-color:#ffe18a}
.portal-toolbar{position:relative;padding:2px 0 18px}
.portal-toolbar:after{
  content:"";position:absolute;left:0;bottom:0;width:120px;height:3px;
  border-radius:99px;background:linear-gradient(90deg,#075b36,#d8b94c);
}
.section-kicker{
  font-size:10px;font-weight:800;letter-spacing:2.4px;
  color:#9b7a22;margin-bottom:7px;
}
.section-title{font-weight:800;color:#075b36;letter-spacing:-.5px}
.section-caption{color:var(--muted)}
.category-heading{
  display:flex;align-items:center;gap:12px;margin:34px 0 17px;
}
.category-heading .line{
  height:2px;flex:1;background:linear-gradient(90deg,rgba(7,91,54,.16),transparent);
}
.app-card{
  position:relative;height:100%;background:rgba(255,255,255,.94);
  border:1px solid rgba(7,91,54,.08);border-radius:22px;overflow:hidden;
  transition:.25s ease;box-shadow:0 10px 28px rgba(30,53,43,.06);
}
.app-card:hover{
  transform:translateY(-6px);box-shadow:0 22px 45px rgba(30,53,43,.13);
  border-color:rgba(214,173,54,.38);
}
.app-image{
  height:155px;background:linear-gradient(135deg,#eaf0eb,#faf8ef);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.app-image img{width:100%;height:100%;object-fit:cover}
.app-icon{font-size:55px;color:#075b36;opacity:.85}
.app-body{padding:20px}
.app-title{font-weight:800;margin:0 0 7px;color:#18362a}
.app-desc{font-size:13px;line-height:1.65;color:var(--muted);min-height:42px}
.category-pill{
  display:inline-flex;padding:6px 10px;border-radius:99px;
  background:rgba(7,91,54,.08);color:#075b36;font-size:11px;font-weight:700;
}
.app-arrow{
  position:absolute;right:18px;bottom:19px;width:35px;height:35px;
  border-radius:50%;display:grid;place-items:center;background:#075b36;color:#fff;
}
/* Admin */
.admin-body{background:#f4f7f5}
.sidebar{
  position:fixed;left:0;top:0;bottom:0;width:255px;background:#092f20;color:#fff;z-index:1040;
  padding:22px 16px;overflow-y:auto
}
.sidebar-brand{display:flex;align-items:center;gap:10px;padding:5px 8px 22px;border-bottom:1px solid rgba(255,255,255,.1)}
.sidebar-brand img{width:44px;height:44px;object-fit:contain}
.sidebar a{display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.72);padding:12px 13px;border-radius:12px;margin:4px 0}
.sidebar a:hover,.sidebar a.active{background:rgba(214,173,54,.14);color:#fff}
.admin-main{margin-left:255px;min-height:100vh}
.topbar{background:#fff;border-bottom:1px solid #e7ece9;padding:15px 25px;position:sticky;top:0;z-index:900}
.content-wrap{padding:25px}
.kpi{padding:21px}
.kpi .icon{width:48px;height:48px;border-radius:14px;background:rgba(7,91,54,.09);color:var(--green);display:grid;place-items:center;font-size:21px}
.table-premium{background:#fff;border-radius:18px;overflow:hidden}
.table-premium thead th{background:#f4f7f5;border:0;color:#557064;font-size:12px;text-transform:uppercase;letter-spacing:.5px}
.table-premium td{vertical-align:middle;border-color:#eef2ef}
.form-control,.form-select{border-radius:12px;padding:11px 13px;border-color:#dce6df}
.form-control:focus,.form-select:focus{border-color:var(--green-2);box-shadow:0 0 0 .2rem rgba(7,91,54,.1)}
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:25px;background:radial-gradient(circle at top right,rgba(214,173,54,.18),transparent 35%),linear-gradient(135deg,#edf4ef,#faf7ed)}
.login-card{width:100%;max-width:470px;background:#fff;border-radius:25px;padding:38px;box-shadow:0 25px 70px rgba(25,55,43,.13)}
.logo-login{width:105px;height:105px;object-fit:contain}
.alert{border:0;border-radius:13px}
.preview-img{max-width:160px;max-height:110px;border-radius:12px;object-fit:cover;border:1px solid #e2e8e4}
@media(max-width:991px){
  .sidebar{width:220px}
  .admin-main{margin-left:220px}
}
@media(max-width:767px){
  .brand-mark{height:48px;width:48px}
  .brand-title{font-size:15px}
  .brand-sub{font-size:8px;letter-spacing:.7px}
  .portal-head{padding-top:34px}
  .portal-head-inner{display:block}
  .portal-head p{font-size:13px}
  .search-shell{margin-top:24px}
  .sidebar{position:relative;width:100%;height:auto;bottom:auto}
  .admin-main{margin-left:0}
  .content-wrap{padding:16px}
}

@media(max-width:1199px){
  .header-layout{grid-template-columns:minmax(260px,1fr) minmax(240px,420px) auto;gap:14px}
  .brand-sub{font-size:8px}
  .header-status{display:none!important}
}
@media(max-width:767px){
  .header-layout{display:flex;flex-wrap:wrap;gap:10px}
  .navbar-premium .container{padding-top:10px!important;padding-bottom:10px!important}
  .brand-mark{height:46px;width:46px}
  .brand-title{font-size:14px}
  .brand-sub{font-size:7px;letter-spacing:.55px;white-space:normal;max-width:230px}
  .header-actions{margin-left:auto}
  .btn-header{font-size:11px;padding:8px 11px!important}
  .header-search{order:3;flex:0 0 100%;height:44px}
  .portal-toolbar{padding-top:5px}
  .section-title{font-size:24px}
}


/* ===== V4: full-image presentation, no crop ===== */
.app-image{
  height:175px;
  background:linear-gradient(135deg,#f4f8f5 0%,#ffffff 52%,#f7f2df 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-bottom:1px solid rgba(7,91,54,.07);
}
.app-image img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
  padding:12px;
  box-sizing:border-box;
  background:#fff;
}

/* ===== V4: modern technology-inspired background ===== */
html{background:#061c15}
body{
  position:relative;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 12% 8%,rgba(31,139,91,.16),transparent 24%),
    radial-gradient(circle at 88% 18%,rgba(212,181,72,.11),transparent 22%),
    radial-gradient(circle at 50% 100%,rgba(7,91,54,.13),transparent 35%),
    linear-gradient(135deg,#f5faf7 0%,#fbfcfa 48%,#f3f8f5 100%);
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.42;
  background-image:
    linear-gradient(rgba(7,91,54,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(7,91,54,.045) 1px,transparent 1px);
  background-size:42px 42px;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 78%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 78%);
}
body:after{
  content:"";
  position:fixed;
  width:560px;
  height:560px;
  right:-220px;
  top:150px;
  pointer-events:none;
  z-index:-1;
  border:1px solid rgba(7,91,54,.09);
  border-radius:50%;
  box-shadow:
    0 0 0 45px rgba(7,91,54,.025),
    0 0 0 95px rgba(7,91,54,.018),
    0 0 80px rgba(7,91,54,.05);
}
main.container{position:relative}
main.container:before{
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  left:-180px;
  top:120px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(214,173,54,.09),transparent 68%);
  pointer-events:none;
}
.portal-toolbar{
  background:rgba(255,255,255,.58);
  border:1px solid rgba(7,91,54,.07);
  border-radius:20px;
  padding:18px 20px 20px!important;
  box-shadow:0 12px 35px rgba(20,55,41,.045);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.portal-toolbar:after{left:20px;bottom:0}
.app-card{
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  background:rgba(255,255,255,.90);
}
.app-card:hover{
  box-shadow:0 24px 50px rgba(6,70,42,.14),0 0 0 1px rgba(214,173,54,.18);
}
.category-heading .line{
  background:linear-gradient(90deg,rgba(7,91,54,.20),rgba(7,91,54,.02),transparent);
}
@media (max-width:700px){
  .app-image{height:160px}
  .app-image img{padding:10px}
}


/* =========================================================
   V5 - Modern Technology + Elegant Hero
   ========================================================= */
body{
  background:
    radial-gradient(circle at 7% 15%,rgba(8,114,72,.22),transparent 24%),
    radial-gradient(circle at 93% 8%,rgba(214,173,54,.18),transparent 25%),
    radial-gradient(circle at 82% 72%,rgba(7,91,54,.13),transparent 28%),
    linear-gradient(135deg,#eef7f1 0%,#f8faf7 45%,#f1f6f2 100%);
}
body:before{
  opacity:.34;
  background-size:36px 36px;
  background-image:
    linear-gradient(rgba(7,91,54,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(7,91,54,.055) 1px,transparent 1px);
}
body:after{
  width:680px;
  height:680px;
  right:-310px;
  top:115px;
  border-color:rgba(7,91,54,.075);
  box-shadow:
    0 0 0 55px rgba(7,91,54,.018),
    0 0 0 115px rgba(214,173,54,.022),
    0 0 100px rgba(7,91,54,.045);
}

/* Main integrated-applications banner */
.portal-hero{
  position:relative;
  min-height:275px;
  overflow:hidden;
  border-radius:30px;
  padding:42px 48px;
  color:#fff;
  background:
    radial-gradient(circle at 82% 42%,rgba(214,173,54,.23),transparent 18%),
    radial-gradient(circle at 56% 20%,rgba(42,169,111,.22),transparent 25%),
    linear-gradient(118deg,#032c1c 0%,#075b36 46%,#043d27 100%);
  border:1px solid rgba(214,173,54,.34);
  box-shadow:
    0 24px 65px rgba(5,64,39,.18),
    inset 0 1px 0 rgba(255,255,255,.10);
}
.portal-hero:before{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;height:4px;
  background:linear-gradient(90deg,transparent,#d6ad36,#ffe58a,#d6ad36,transparent);
}
.portal-hero-grid{
  position:absolute;inset:0;opacity:.17;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.15) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.15) 1px,transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.9),transparent 78%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,.9),transparent 78%);
}
.portal-hero-glow{
  position:absolute;
  width:330px;height:330px;
  right:85px;top:-145px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,230,126,.20),transparent 66%);
  filter:blur(2px);
  pointer-events:none;
}
.portal-hero-ring{
  position:absolute;
  border:1px solid rgba(245,223,136,.18);
  border-radius:50%;
  pointer-events:none;
}
.portal-ring-1{width:390px;height:390px;right:-75px;top:-62px}
.portal-ring-2{width:275px;height:275px;right:-18px;top:0;border-color:rgba(255,255,255,.10)}
.portal-hero-content{position:relative;z-index:3;max-width:690px}
.hero-eyebrow{
  display:flex;align-items:center;gap:9px;
  font-size:10px;font-weight:800;letter-spacing:2.5px;
  color:#f5df88;margin-bottom:13px;
}
.hero-eyebrow span{
  width:28px;height:2px;border-radius:9px;
  background:#f5df88;box-shadow:0 0 12px rgba(245,223,136,.55);
}
.portal-hero h1{
  margin:0 0 10px;
  font-size:clamp(34px,4vw,55px);
  line-height:1.05;
  font-weight:800;
  letter-spacing:-1.7px;
  text-shadow:0 8px 28px rgba(0,0,0,.18);
}
.portal-hero h1 strong{
  color:#f5d76c;
  font-weight:800;
}
.portal-hero p{
  max-width:650px;
  margin:0;
  color:rgba(255,255,255,.82);
  font-size:14px;
  line-height:1.75;
}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:9px;margin-top:22px;
}
.hero-meta span{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 12px;border-radius:99px;
  color:rgba(255,255,255,.88);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.13);
  font-size:10px;font-weight:700;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.hero-meta i{color:#f5df88;font-size:13px}
.portal-hero-logo{
  position:absolute;right:76px;top:50%;
  width:155px;height:155px;
  transform:translateY(-50%);
  display:grid;place-items:center;
  z-index:2;
}
.portal-hero-logo img{
  width:108px;height:108px;object-fit:contain;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.28));
}
.logo-halo{
  position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(245,223,136,.30);
  box-shadow:
    0 0 0 16px rgba(245,223,136,.035),
    0 0 0 34px rgba(255,255,255,.025),
    0 0 55px rgba(245,223,136,.12);
}
.logo-halo:after{
  content:"";
  position:absolute;
  inset:18px;border-radius:50%;
  border:1px dashed rgba(255,255,255,.18);
}

.category-block{
  position:relative;
  padding:3px 0 6px;
}
.category-heading{
  position:relative;
  padding:9px 14px;
  margin:34px 0 17px;
  border-radius:15px;
  background:rgba(255,255,255,.48);
  border:1px solid rgba(7,91,54,.06);
  box-shadow:0 8px 25px rgba(20,55,41,.035);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.category-heading .category-pill{
  background:linear-gradient(135deg,#075b36,#0b7a48);
  color:#fff;
  padding:8px 13px;
  box-shadow:0 6px 15px rgba(7,91,54,.12);
}
.category-heading .line{
  background:linear-gradient(90deg,rgba(7,91,54,.20),rgba(214,173,54,.12),transparent);
}
.app-card{
  border-color:rgba(7,91,54,.075);
  box-shadow:0 14px 35px rgba(24,65,47,.065);
}
.app-card:before{
  content:"";
  position:absolute;
  left:18px;right:18px;top:0;height:2px;
  background:linear-gradient(90deg,transparent,#d6ad36,transparent);
  opacity:0;
  transition:.25s ease;
}
.app-card:hover:before{opacity:1}
.app-image{
  height:175px;
  background:
    radial-gradient(circle at 50% 50%,rgba(7,91,54,.05),transparent 55%),
    linear-gradient(135deg,#eef6f0,#fff,#f8f3e3);
}
.app-image img{
  object-fit:contain!important;
  padding:13px!important;
  background:rgba(255,255,255,.88)!important;
}
.portal-toolbar{display:none}

/* Mobile hero */
@media(max-width:767px){
  .portal-hero{
    min-height:390px;
    padding:30px 24px;
    border-radius:24px;
  }
  .portal-hero-content{max-width:none}
  .portal-hero h1{font-size:35px}
  .portal-hero p{font-size:13px}
  .portal-hero-logo{
    right:50%;
    top:auto;
    bottom:-28px;
    width:125px;height:125px;
    transform:translateX(50%);
    opacity:.85;
  }
  .portal-hero-logo img{width:84px;height:84px}
  .portal-ring-1{right:-130px;top:150px}
  .portal-ring-2{right:-80px;top:205px}
  .hero-meta{padding-bottom:80px}
}


/* =========================================================
   V6 - Colorful Modern Application Cards + Rich Page Background
   ========================================================= */

/* Richer page atmosphere */
body{
  background:
    radial-gradient(900px 500px at -5% 5%, rgba(6,104,62,.20), transparent 62%),
    radial-gradient(760px 500px at 105% 18%, rgba(212,173,54,.19), transparent 60%),
    radial-gradient(700px 520px at 80% 82%, rgba(0,125,105,.12), transparent 64%),
    radial-gradient(520px 420px at 18% 92%, rgba(68,119,181,.09), transparent 65%),
    linear-gradient(135deg,#e7f3ec 0%,#f6f7f2 38%,#eef6f1 70%,#e9f1ed 100%);
}
body:before{
  opacity:.27;
  background-size:34px 34px;
  background-image:
    linear-gradient(rgba(5,82,51,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(5,82,51,.075) 1px,transparent 1px);
}
body:after{
  border-color:rgba(7,91,54,.10);
  box-shadow:
    0 0 0 55px rgba(7,91,54,.025),
    0 0 0 115px rgba(214,173,54,.035),
    0 0 0 185px rgba(7,91,54,.018),
    0 0 100px rgba(7,91,54,.055);
}

/* Application cards */
.app-card{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(7,91,54,.10);
  border-radius:20px;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(244,249,246,.90));
  box-shadow:
    0 12px 30px rgba(19,61,43,.075),
    0 2px 8px rgba(19,61,43,.035);
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}
.app-card:after{
  content:"";
  position:absolute;
  width:130px;height:130px;
  right:-65px;bottom:-72px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(7,91,54,.10),transparent 68%);
  pointer-events:none;
}
.app-card:hover{
  transform:translateY(-6px);
  border-color:rgba(7,91,54,.18);
  box-shadow:
    0 22px 46px rgba(9,70,44,.14),
    0 0 0 1px rgba(214,173,54,.14);
}

/* A more colorful image/icon area */
.app-image{
  position:relative;
  height:165px;
  padding:13px;
  background:
    radial-gradient(circle at 18% 25%,rgba(255,255,255,.90),transparent 30%),
    linear-gradient(135deg,#dff3e8 0%,#f5fbf7 45%,#fff5d8 100%);
  border-bottom:1px solid rgba(7,91,54,.07);
}
.app-image:before{
  content:"";
  position:absolute;
  width:115px;height:115px;
  right:-38px;top:-42px;
  border-radius:50%;
  border:1px solid rgba(7,91,54,.11);
  box-shadow:0 0 0 18px rgba(7,91,54,.025);
}
.app-image:after{
  content:"";
  position:absolute;
  left:-28px;bottom:-58px;
  width:120px;height:120px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(214,173,54,.13),transparent 68%);
  pointer-events:none;
}
.app-image img{
  position:relative;
  z-index:2;
  object-fit:contain!important;
  object-position:center!important;
  padding:12px!important;
  border-radius:14px;
  background:rgba(255,255,255,.82)!important;
  box-shadow:0 7px 18px rgba(20,65,47,.06);
}

/* Color accents on card top edge */
.app-card:nth-child(6n+1){--card-accent:#087248;--card-soft:rgba(8,114,72,.10)}
.app-card:nth-child(6n+2){--card-accent:#1976a8;--card-soft:rgba(25,118,168,.10)}
.app-card:nth-child(6n+3){--card-accent:#a97818;--card-soft:rgba(169,120,24,.11)}
.app-card:nth-child(6n+4){--card-accent:#6d54a8;--card-soft:rgba(109,84,168,.10)}
.app-card:nth-child(6n+5){--card-accent:#168b78;--card-soft:rgba(22,139,120,.10)}
.app-card:nth-child(6n+6){--card-accent:#b65d35;--card-soft:rgba(182,93,53,.10)}

.app-card:before{
  content:"";
  position:absolute;
  top:0;left:18px;right:18px;
  height:3px;
  border-radius:0 0 8px 8px;
  background:linear-gradient(90deg,transparent,var(--card-accent),#d6ad36,transparent);
  opacity:.88;
  z-index:4;
}

/* Give card body a subtle matching tint */
.app-card .app-body,
.app-card .card-body{
  background:linear-gradient(180deg,rgba(255,255,255,.94),var(--card-soft));
}
.app-card .app-title,
.app-card h3,
.app-card h4{
  color:#123b2a;
}

/* Category headings become richer glass panels */
.category-heading{
  background:
    linear-gradient(100deg,rgba(255,255,255,.70),rgba(238,248,242,.52));
  border:1px solid rgba(7,91,54,.09);
  box-shadow:
    0 10px 30px rgba(21,64,45,.055),
    inset 0 1px 0 rgba(255,255,255,.85);
}
.category-heading .category-pill{
  background:linear-gradient(135deg,#043d27,#087248 72%,#0b8650);
  border:1px solid rgba(214,173,54,.28);
  box-shadow:
    0 7px 18px rgba(4,61,39,.18),
    inset 0 1px 0 rgba(255,255,255,.12);
}

/* Extra depth around the content area */
main.container{
  position:relative;
}
main.container:after{
  content:"";
  position:absolute;
  inset:5% -8% 2%;
  z-index:-2;
  border-radius:50px;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.42),transparent 70%);
  filter:blur(18px);
  pointer-events:none;
}

/* Mobile */
@media(max-width:767px){
  .app-image{height:150px}
  .app-image img{padding:10px!important}
  .app-card{border-radius:17px}
}


/* =========================================================
   V8 - ADMIN BANNER GLOBAL / NO PAGE TITLE
   ========================================================= */
.admin-body{
  background:
    radial-gradient(900px 520px at 4% 0%,rgba(20,154,103,.12),transparent 62%),
    radial-gradient(800px 480px at 96% 0%,rgba(218,177,57,.14),transparent 60%),
    linear-gradient(135deg,#edf6f1 0%,#f8faf8 52%,#eef6f2 100%);
}
.topbar{
  min-height:82px;
  padding:14px 25px;
  color:#fff;
  background:
    radial-gradient(220px 120px at 82% 5%,rgba(246,218,112,.26),transparent 72%),
    radial-gradient(260px 150px at 15% 100%,rgba(25,173,116,.25),transparent 70%),
    linear-gradient(105deg,#063b27 0%,#087348 48%,#075b39 100%);
  border-bottom:1px solid rgba(229,196,90,.55);
  box-shadow:0 10px 30px rgba(4,61,39,.16);
  overflow:hidden;
}
.topbar:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.12;
  background-image:linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,.9),transparent 92%);
  mask-image:linear-gradient(to right,rgba(0,0,0,.9),transparent 92%);
}
.topbar:after{
  content:"";position:absolute;width:300px;height:300px;right:-125px;top:-185px;border-radius:50%;
  border:1px solid rgba(245,223,136,.28);
  box-shadow:0 0 0 24px rgba(245,223,136,.035),0 0 0 58px rgba(255,255,255,.018);
  pointer-events:none;
}
.topbar > *{position:relative;z-index:2}
.admin-banner-brand{display:flex;align-items:center;gap:12px;min-width:0}
.admin-banner-dot{width:11px;height:11px;border-radius:50%;background:#f0d36d;box-shadow:0 0 0 5px rgba(240,211,109,.14),0 0 20px rgba(240,211,109,.7);flex:0 0 auto}
.admin-banner-title{font-size:16px;font-weight:800;letter-spacing:.8px;line-height:1.15}
.admin-banner-title span{font-weight:500;color:#f1d879}
.admin-banner-subtitle{font-size:11px;color:rgba(255,255,255,.72);margin-top:4px;letter-spacing:.35px}
.admin-role-badge{padding:9px 13px!important;color:#174431!important;background:rgba(255,255,255,.94)!important;border:1px solid rgba(229,196,90,.4)!important;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.admin-role-badge i{color:#087248}

/* =========================================================
   V7 - CPanel Dashboard Modern Header + Animated Cards
   ========================================================= */

/* Dashboard background */
body.admin-body{
  background:
    radial-gradient(700px 420px at 8% 8%,rgba(7,114,72,.13),transparent 62%),
    radial-gradient(650px 420px at 95% 5%,rgba(214,173,54,.14),transparent 60%),
    radial-gradient(600px 450px at 80% 90%,rgba(25,118,168,.07),transparent 65%),
    linear-gradient(135deg,#edf6f1 0%,#f7f9f7 48%,#edf4f0 100%);
  position:relative;
}
body.admin-body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.24;
  background-image:
    linear-gradient(rgba(7,91,54,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(7,91,54,.055) 1px,transparent 1px);
  background-size:36px 36px;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 90%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 90%);
}
.admin-main,.topbar,.content-wrap{position:relative;z-index:1}

/* Animated CPanel sidebar */
.sidebar{
  background:
    radial-gradient(circle at 20% 8%,rgba(32,155,101,.20),transparent 27%),
    radial-gradient(circle at 85% 75%,rgba(214,173,54,.11),transparent 25%),
    linear-gradient(165deg,#052d1e 0%,#063c28 45%,#082b20 100%);
  box-shadow:12px 0 35px rgba(2,39,25,.13);
  border-right:1px solid rgba(214,173,54,.18);
}
.sidebar:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.13;
  background-image:
    linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 78%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 78%);
}
.sidebar-brand{
  position:relative;
  border-bottom:1px solid rgba(214,173,54,.22);
}
.sidebar-brand img{
  filter:drop-shadow(0 4px 10px rgba(214,173,54,.25));
}
.sidebar a{
  position:relative;
  overflow:hidden;
  border:1px solid transparent;
  transition:all .25s ease;
}
.sidebar a:before{
  content:"";
  position:absolute;
  left:-45%;
  top:0;
  width:40%;
  height:100%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
  transition:left .45s ease;
}
.sidebar a:hover:before,.sidebar a.active:before{left:120%}
.sidebar a:hover{
  background:linear-gradient(90deg,rgba(214,173,54,.16),rgba(255,255,255,.045));
  border-color:rgba(214,173,54,.16);
  color:#fff;
  transform:translateX(3px);
}
.sidebar a.active{
  background:linear-gradient(90deg,rgba(7,147,88,.40),rgba(214,173,54,.13));
  border-color:rgba(214,173,54,.24);
  box-shadow:inset 3px 0 #e5c45a,0 8px 20px rgba(0,0,0,.10);
}
.sidebar a i{
  width:20px;
  text-align:center;
  color:#d9c067;
}

/* Premium animated topbar/header */
.topbar{
  padding:16px 25px;
  color:#fff;
  background:
    radial-gradient(circle at 82% 0%,rgba(214,173,54,.20),transparent 26%),
    linear-gradient(105deg,#043b27 0%,#075b36 55%,#06452d 100%);
  border-bottom:1px solid rgba(214,173,54,.42);
  box-shadow:0 8px 28px rgba(4,61,39,.13);
  overflow:hidden;
}
.topbar:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.10;
  background-image:
    linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px);
  background-size:30px 30px;
}
.topbar:after{
  content:"";
  position:absolute;
  width:360px;height:360px;
  right:-160px;top:-210px;
  border:1px solid rgba(245,223,136,.20);
  border-radius:50%;
  box-shadow:
    0 0 0 28px rgba(245,223,136,.035),
    0 0 0 65px rgba(255,255,255,.018);
  animation:cpanelOrbit 12s linear infinite;
}
.topbar > *{position:relative;z-index:2}
.topbar .fw-bold{
  font-size:17px;
  letter-spacing:.2px;
}
.topbar .small{
  color:rgba(255,255,255,.65)!important;
}
.topbar .badge{
  padding:9px 13px;
  color:#174431!important;
  background:rgba(255,255,255,.92)!important;
  border:1px solid rgba(214,173,54,.35);
  box-shadow:0 5px 18px rgba(0,0,0,.10);
}
.topbar .badge i{color:#087248}

/* Dashboard KPI cards */
.stat-card{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(7,91,54,.09);
  border-radius:20px;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(240,247,243,.92));
  box-shadow:0 13px 32px rgba(18,63,44,.075);
  transition:transform .30s ease,box-shadow .30s ease,border-color .30s ease;
}
.stat-card:before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,#087248,#d6ad36);
}
.stat-card:after{
  content:"";
  position:absolute;
  width:150px;height:150px;
  right:-65px;bottom:-75px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(7,114,72,.13),transparent 68%);
  transition:transform .4s ease;
}
.stat-card:hover{
  transform:translateY(-7px);
  border-color:rgba(7,91,54,.18);
  box-shadow:
    0 24px 48px rgba(7,74,47,.14),
    0 0 0 1px rgba(214,173,54,.13);
}
.stat-card:hover:after{transform:scale(1.35)}
.stat-card .small.text-muted:first-child{
  color:#567064!important;
  font-weight:700;
  letter-spacing:.6px;
  text-transform:uppercase;
  font-size:10px;
}
.stat-card .display-6{
  color:#073e29;
  text-shadow:0 2px 12px rgba(7,91,54,.08);
}
.kpi .icon{
  width:52px;
  height:52px;
  border-radius:16px;
  background:linear-gradient(135deg,rgba(7,114,72,.14),rgba(214,173,54,.15));
  color:#087248;
  border:1px solid rgba(7,91,54,.10);
  box-shadow:0 7px 18px rgba(7,91,54,.08);
  transition:transform .3s ease,box-shadow .3s ease;
}
.stat-card:hover .icon{
  transform:rotate(6deg) scale(1.08);
  box-shadow:0 10px 24px rgba(7,91,54,.15);
}

/* Dashboard content panels/cards */
.panel{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(7,91,54,.08)!important;
  border-radius:21px!important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.95),rgba(244,249,246,.90));
  box-shadow:0 15px 38px rgba(20,60,43,.065)!important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.panel:before{
  content:"";
  position:absolute;
  left:22px;right:22px;top:0;height:3px;
  border-radius:0 0 8px 8px;
  background:linear-gradient(90deg,transparent,#087248,#d6ad36,transparent);
}
.panel h5{
  color:#103f2d;
}
.panel .btn-success{
  background:linear-gradient(135deg,#05613a,#087a49);
  border:0;
  box-shadow:0 7px 18px rgba(7,91,54,.16);
}
.panel .btn-success:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 23px rgba(7,91,54,.23);
}
.panel .btn-outline-success{
  border-color:rgba(7,91,54,.28);
  color:#075b36;
}
.panel .btn-outline-success:hover{
  background:#075b36;
  border-color:#075b36;
}

/* Table gets a premium card treatment */
.table-premium{
  border:1px solid rgba(7,91,54,.07);
  box-shadow:0 7px 20px rgba(20,60,43,.035);
}
.table-premium thead th{
  background:linear-gradient(90deg,#eaf4ee,#f6f1df);
  color:#416858;
}
.table-premium tbody tr{
  transition:background .2s ease,transform .2s ease;
}
.table-premium tbody tr:hover{
  background:rgba(7,114,72,.035);
}

/* Quick-action buttons */
.panel .d-grid .btn{
  border-radius:13px;
  transition:all .25s ease;
}
.panel .d-grid .btn:hover{
  transform:translateX(3px);
}

/* Animation */
@keyframes cpanelOrbit{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

@media(max-width:767px){
  .topbar{
    padding:14px 16px;
  }
  .topbar .fw-bold{font-size:15px}
  .content-wrap{padding:17px}
  .stat-card{border-radius:17px}
}

/* =========================================================
   V5 - MODERN TECHNOLOGY UI / DASHBOARD & FOOTER
   ========================================================= */
:root{
  --tech-green:#063d29;
  --tech-green-2:#087a4a;
  --tech-gold:#d9b94c;
  --tech-blue:#1b6ca8;
  --tech-purple:#7357b8;
  --tech-cyan:#168fa3;
}

/* Teknologi background */
body{
  background:
    radial-gradient(circle at 5% 5%,rgba(22,143,163,.12),transparent 22%),
    radial-gradient(circle at 95% 8%,rgba(115,87,184,.10),transparent 23%),
    radial-gradient(circle at 75% 85%,rgba(7,122,74,.11),transparent 27%),
    linear-gradient(135deg,#f4faf8 0%,#f9fbfc 45%,#f3f8f6 100%);
}
body:before{
  opacity:.32;
  background-image:
    linear-gradient(rgba(7,91,54,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(7,91,54,.055) 1px,transparent 1px),
    radial-gradient(circle,rgba(7,91,54,.10) 1px,transparent 1.5px);
  background-size:40px 40px,40px 40px,80px 80px;
}

/* Public portal hero */
.portal-head,
.portal-hero{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(7,91,54,.10);
  background:
    linear-gradient(135deg,rgba(3,57,38,.98),rgba(6,104,66,.95) 58%,rgba(15,126,122,.91));
  box-shadow:0 22px 55px rgba(5,63,43,.16);
}
.portal-head:before,
.portal-hero:before{
  content:"";position:absolute;width:420px;height:420px;right:-170px;top:-220px;
  border:1px solid rgba(255,255,255,.12);border-radius:50%;
  box-shadow:0 0 0 42px rgba(255,255,255,.025),0 0 0 90px rgba(255,255,255,.018);
}
.portal-head:after,
.portal-hero:after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;
  background-image:linear-gradient(120deg,transparent 0 45%,rgba(255,255,255,.15) 46%,transparent 47%);
  background-size:180px 180px;
}

/* Colorful application cards */
.app-card{
  border-radius:22px;
  background:rgba(255,255,255,.94);
  box-shadow:0 13px 34px rgba(23,54,44,.075);
}
.app-card:before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;z-index:3;
  background:linear-gradient(90deg,#087248,#d9b94c);
}
.app-card-wrap:nth-child(4n+1) .app-card:before{background:linear-gradient(90deg,#087248,#1db77a)}
.app-card-wrap:nth-child(4n+2) .app-card:before{background:linear-gradient(90deg,#1b6ca8,#39a9e8)}
.app-card-wrap:nth-child(4n+3) .app-card:before{background:linear-gradient(90deg,#7357b8,#b08be8)}
.app-card-wrap:nth-child(4n) .app-card:before{background:linear-gradient(90deg,#b7861e,#ead16e)}
.app-card-wrap:nth-child(4n+1) .app-icon{color:#087248}
.app-card-wrap:nth-child(4n+2) .app-icon{color:#1b6ca8}
.app-card-wrap:nth-child(4n+3) .app-icon{color:#7357b8}
.app-card-wrap:nth-child(4n) .app-icon{color:#b7861e}
.app-card-wrap:nth-child(4n+1) .app-arrow{background:linear-gradient(135deg,#087248,#12a16a)}
.app-card-wrap:nth-child(4n+2) .app-arrow{background:linear-gradient(135deg,#1b6ca8,#38a7e7)}
.app-card-wrap:nth-child(4n+3) .app-arrow{background:linear-gradient(135deg,#7357b8,#a878df)}
.app-card-wrap:nth-child(4n) .app-arrow{background:linear-gradient(135deg,#b7861e,#d9b94c)}
.app-image{background:linear-gradient(135deg,#f5faf8,#ffffff 55%,#f8f5e8)}
.app-card:hover{transform:translateY(-8px) scale(1.005)}

/* Modern footer - public portal */
.site-footer{
  position:relative;
  margin-top:55px;
  color:#fff;
  background:linear-gradient(120deg,#032d1e,#064b32 55%,#075f49);
  border-top:1px solid rgba(217,185,76,.45);
  box-shadow:0 -14px 38px rgba(3,55,37,.12);
  overflow:hidden;
}
.site-footer:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.12;
  background-image:linear-gradient(rgba(255,255,255,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.15) 1px,transparent 1px);
  background-size:32px 32px;
}
.site-footer:after{
  content:"";position:absolute;width:260px;height:260px;right:-100px;top:-160px;
  border:1px solid rgba(255,255,255,.14);border-radius:50%;
  box-shadow:0 0 0 30px rgba(255,255,255,.025),0 0 0 65px rgba(255,255,255,.018);
}
.site-footer .container{position:relative;z-index:2}
.footer-brand{font-weight:800;letter-spacing:.2px}
.footer-meta{font-size:11px;letter-spacing:.35px;color:rgba(255,255,255,.66)}
.footer-line{height:1px;background:linear-gradient(90deg,transparent,rgba(217,185,76,.55),transparent);margin:0 0 17px}

/* Admin page technology background */
.admin-body{
  background:
    radial-gradient(circle at 10% 12%,rgba(22,143,163,.10),transparent 20%),
    radial-gradient(circle at 90% 10%,rgba(115,87,184,.09),transparent 21%),
    linear-gradient(135deg,#f2f8f5,#f8fafb 50%,#f2f7f5);
}
.admin-body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.24;
  background-image:linear-gradient(rgba(7,91,54,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(7,91,54,.05) 1px,transparent 1px);
  background-size:38px 38px;
}
.admin-main{position:relative;z-index:1}

/* Four dashboard KPI colors */
.admin-main .stat-card:nth-child(1),
.admin-main .row:first-child > div:nth-child(1) .stat-card{
  background:linear-gradient(145deg,#ffffff 0%,#edf9f3 100%);
}
.admin-main .row:first-child > div:nth-child(2) .stat-card{
  background:linear-gradient(145deg,#ffffff 0%,#edf7fd 100%);
}
.admin-main .row:first-child > div:nth-child(3) .stat-card{
  background:linear-gradient(145deg,#ffffff 0%,#f5f0fc 100%);
}
.admin-main .row:first-child > div:nth-child(4) .stat-card{
  background:linear-gradient(145deg,#ffffff 0%,#fcf7e8 100%);
}
.admin-main .row:first-child > div:nth-child(1) .stat-card:before{background:linear-gradient(180deg,#087248,#24b77d)}
.admin-main .row:first-child > div:nth-child(2) .stat-card:before{background:linear-gradient(180deg,#1b6ca8,#45b7ef)}
.admin-main .row:first-child > div:nth-child(3) .stat-card:before{background:linear-gradient(180deg,#7357b8,#ad84e2)}
.admin-main .row:first-child > div:nth-child(4) .stat-card:before{background:linear-gradient(180deg,#b7861e,#e2c95f)}
.admin-main .row:first-child > div:nth-child(1) .kpi .icon{color:#087248;background:rgba(36,183,125,.13)}
.admin-main .row:first-child > div:nth-child(2) .kpi .icon{color:#1b6ca8;background:rgba(69,183,239,.13)}
.admin-main .row:first-child > div:nth-child(3) .kpi .icon{color:#7357b8;background:rgba(173,132,226,.14)}
.admin-main .row:first-child > div:nth-child(4) .kpi .icon{color:#b7861e;background:rgba(226,201,95,.18)}

/* Admin footer */
.admin-footer{
  position:relative;
  margin-top:28px;
  padding:22px 25px;
  color:#fff;
  background:linear-gradient(120deg,#032d1e,#064b32 55%,#075f49);
  border-top:1px solid rgba(217,185,76,.45);
  overflow:hidden;
}
.admin-footer:before{
  content:"";position:absolute;inset:0;opacity:.10;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.15) 1px,transparent 1px);
  background-size:30px 30px;
}
.admin-footer .footer-inner{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:15px}
.admin-footer .footer-title{font-weight:800;font-size:13px}
.admin-footer .footer-text{font-size:11px;color:rgba(255,255,255,.65)}

@media(max-width:767px){
  .site-footer{margin-top:35px}
  .admin-footer{padding:20px 16px}
  .admin-footer .footer-inner{flex-direction:column;text-align:center}
}

/* =========================================================
   FINAL UI OVERRIDES - Dashboard colors, page backgrounds,
   and restore original banner palette
   ========================================================= */

/* Semua halaman: background modern, tetapi tetap ringan dibaca */
html{background:#e9f2ed}
body,
body.admin-body{
  min-height:100vh;
  background:
    radial-gradient(700px 420px at -8% 0%,rgba(7,91,54,.16),transparent 65%),
    radial-gradient(650px 420px at 108% 8%,rgba(214,173,54,.15),transparent 65%),
    radial-gradient(600px 420px at 85% 95%,rgba(27,108,168,.07),transparent 65%),
    linear-gradient(135deg,#edf6f1 0%,#f8faf8 48%,#edf4f0 100%);
}

/* Background khusus halaman login */
.login-wrap{
  background:
    radial-gradient(650px 450px at 5% 8%,rgba(7,91,54,.18),transparent 65%),
    radial-gradient(550px 400px at 95% 10%,rgba(214,173,54,.16),transparent 65%),
    linear-gradient(135deg,#e9f5ee 0%,#f9faf7 52%,#edf5f0 100%);
}

/* Background panel admin */
.admin-main{background:transparent}
.content-wrap{position:relative}
.content-wrap:before{
  content:"";
  position:fixed;
  width:380px;height:380px;
  right:-170px;bottom:-150px;
  border-radius:50%;
  border:1px solid rgba(7,91,54,.07);
  box-shadow:0 0 0 38px rgba(7,91,54,.018),0 0 0 78px rgba(214,173,54,.015);
  pointer-events:none;
  z-index:-1;
}

/* Dashboard cards: warna lebih tegas dan berbeda */
.admin-main .row:first-child > div:nth-child(1) .stat-card{
  background:linear-gradient(145deg,#f7fffb 0%,#dff5e9 100%) !important;
  border-color:rgba(8,114,72,.20);
}
.admin-main .row:first-child > div:nth-child(2) .stat-card{
  background:linear-gradient(145deg,#f7fcff 0%,#e0f1fb 100%) !important;
  border-color:rgba(27,108,168,.20);
}
.admin-main .row:first-child > div:nth-child(3) .stat-card{
  background:linear-gradient(145deg,#fbf9ff 0%,#eee5fb 100%) !important;
  border-color:rgba(115,87,184,.20);
}
.admin-main .row:first-child > div:nth-child(4) .stat-card{
  background:linear-gradient(145deg,#fffdf6 0%,#f9edc9 100%) !important;
  border-color:rgba(183,134,30,.24);
}
.admin-main .stat-card{
  position:relative;
  overflow:hidden;
  border-radius:20px;
  box-shadow:0 12px 30px rgba(24,62,46,.09);
  transition:transform .22s ease,box-shadow .22s ease;
}
.admin-main .stat-card:hover{
  transform:translateY(-5px);
  box-shadow:0 20px 42px rgba(24,62,46,.14);
}
.admin-main .stat-card:after{
  content:"";
  position:absolute;
  width:125px;height:125px;
  right:-52px;bottom:-65px;
  border-radius:50%;
  background:rgba(255,255,255,.42);
  pointer-events:none;
}
.admin-main .row:first-child > div:nth-child(1) .stat-card:before{background:linear-gradient(180deg,#087248,#29c486) !important}
.admin-main .row:first-child > div:nth-child(2) .stat-card:before{background:linear-gradient(180deg,#1b6ca8,#45b7ef) !important}
.admin-main .row:first-child > div:nth-child(3) .stat-card:before{background:linear-gradient(180deg,#7357b8,#b08be8) !important}
.admin-main .row:first-child > div:nth-child(4) .stat-card:before{background:linear-gradient(180deg,#b7861e,#e5ca63) !important}
.admin-main .stat-card .display-6{color:#18362a}

/* Restore banner to the previous PA Denpasar green-gold palette */
.portal-hero{
  background:
    radial-gradient(circle at 82% 42%,rgba(214,173,54,.23),transparent 18%),
    radial-gradient(circle at 56% 20%,rgba(42,169,111,.22),transparent 25%),
    linear-gradient(118deg,#032c1c 0%,#075b36 46%,#043d27 100%) !important;
  border:1px solid rgba(214,173,54,.34) !important;
  box-shadow:0 24px 65px rgba(5,64,39,.18),inset 0 1px 0 rgba(255,255,255,.10) !important;
}
.portal-hero:before{
  height:4px;
  background:linear-gradient(90deg,transparent,#d6ad36,#ffe58a,#d6ad36,transparent) !important;
}
.portal-hero:after{display:none}

/* Tetap colorful pada kartu aplikasi portal */
.app-card-wrap:nth-child(4n+1) .app-card:before{background:linear-gradient(90deg,#087248,#1db77a)}
.app-card-wrap:nth-child(4n+2) .app-card:before{background:linear-gradient(90deg,#1b6ca8,#39a9e8)}
.app-card-wrap:nth-child(4n+3) .app-card:before{background:linear-gradient(90deg,#7357b8,#b08be8)}
.app-card-wrap:nth-child(4n) .app-card:before{background:linear-gradient(90deg,#b7861e,#ead16e)}

/* =========================================================
   FINAL GRID + COMPACT TECHNOLOGY FOOTER
   ========================================================= */
.portal-viewbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:12px 15px;
  border:1px solid rgba(7,91,54,.10);
  border-radius:16px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 8px 25px rgba(25,60,45,.055);
}
.viewbar-label{display:flex;align-items:center;gap:10px;min-width:0}
.viewbar-icon{
  width:36px;height:36px;flex:0 0 36px;border-radius:11px;display:grid;place-items:center;
  color:#fff;background:linear-gradient(135deg,#075b36,#0b8a55);
  box-shadow:0 5px 13px rgba(7,91,54,.18);
}
.viewbar-label strong{display:block;font-size:12px;color:#18362a}
.viewbar-label small{display:block;color:#74817b;font-size:10px;margin-top:2px}
.grid-picker{display:flex;align-items:center;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.grid-picker-title{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:#8a7650;margin-right:3px}
.grid-option{
  min-width:35px;height:34px;padding:0 8px;border:1px solid #dce7e0;border-radius:10px;
  background:#fff;color:#49645a;display:inline-flex;align-items:center;justify-content:center;gap:4px;
  font-size:11px;font-weight:700;transition:.18s ease;cursor:pointer;
}
.grid-option i{font-size:13px}
.grid-option:hover{border-color:#9bc5b0;color:#075b36;transform:translateY(-1px)}
.grid-option.active{
  color:#fff;border-color:#075b36;background:linear-gradient(135deg,#075b36,#0b8551);
  box-shadow:0 6px 15px rgba(7,91,54,.18);
}
.apps-grid{
  --grid-columns:4;
  display:grid;
  grid-template-columns:repeat(var(--grid-columns),minmax(0,1fr));
  gap:20px;
}
.apps-grid .app-card-wrap{min-width:0}
.apps-grid .app-desc{overflow-wrap:anywhere}

/* Footer ringkas: tetap modern, tetapi tidak memakan banyak ruang */
.site-footer{margin-top:38px}
.site-footer .container{padding-top:9px!important;padding-bottom:9px!important}
.site-footer .footer-line{margin-bottom:8px}
.site-footer .footer-brand{font-size:11px;letter-spacing:.15px}
.site-footer .footer-meta{font-size:9px;line-height:1.45;letter-spacing:.2px}
.site-footer:before{opacity:.08;background-size:24px 24px}
.site-footer:after{width:170px;height:170px;right:-65px;top:-105px}

.admin-footer-compact{margin-top:18px;padding:9px 20px}
.admin-footer-compact .footer-inner{gap:10px}
.admin-footer-compact .footer-title{font-size:11px}
.admin-footer-compact .footer-text{font-size:9px;line-height:1.4}
.admin-footer-compact:before{opacity:.07;background-size:24px 24px}

@media(max-width:1199px){
  .apps-grid{gap:18px}
}
@media(max-width:991px){
  .apps-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:767px){
  .portal-viewbar{align-items:flex-start;flex-direction:column;padding:11px 12px}
  .grid-picker{width:100%;justify-content:flex-start}
  .apps-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .app-body{padding:16px}
  .app-image{height:145px}
  .site-footer{margin-top:28px}
  .site-footer .container{padding-left:14px!important;padding-right:14px!important}
}
@media(max-width:480px){
  .apps-grid{grid-template-columns:1fr;gap:13px}
  .app-image{height:155px}
  .grid-option{min-width:33px;height:32px}
  .grid-picker-title{display:none}
  .site-footer .d-flex{gap:5px!important}
}

/* ===== V7: Elegant Premium Page Background ===== */
html{background:#eaf2ed}
body{
  background:
    radial-gradient(900px 520px at -8% -4%, rgba(7,91,54,.16), transparent 62%),
    radial-gradient(760px 480px at 108% 4%, rgba(214,173,54,.14), transparent 60%),
    radial-gradient(680px 520px at 88% 92%, rgba(24,119,93,.10), transparent 64%),
    radial-gradient(560px 420px at 12% 88%, rgba(67,112,154,.07), transparent 65%),
    linear-gradient(135deg,#edf5f0 0%,#f8faf8 42%,#f1f6f3 72%,#eef3f0 100%);
  background-attachment:fixed;
}
body:before{
  opacity:.72;
  background-image:
    linear-gradient(rgba(7,91,54,.038) 1px,transparent 1px),
    linear-gradient(90deg,rgba(7,91,54,.038) 1px,transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.85),transparent 88%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.85),transparent 88%);
}
body:after{
  background:
    radial-gradient(circle at 20% 25%,rgba(255,255,255,.62),transparent 38%),
    radial-gradient(circle at 78% 70%,rgba(255,255,255,.42),transparent 42%);
  pointer-events:none;
}
/* Keep the original green-gold banner treatment untouched. */
.portal-hero{box-shadow:0 24px 65px rgba(20,67,48,.16)}
.portal-viewbar,.category-block,.panel,.table-premium{box-shadow:0 14px 38px rgba(31,67,52,.07)}

/* Admin pages get the same elegant technology background without affecting the sidebar. */
.admin-body{
  background:
    radial-gradient(760px 520px at 96% -5%,rgba(214,173,54,.12),transparent 62%),
    radial-gradient(780px 540px at 12% 92%,rgba(7,91,54,.14),transparent 64%),
    linear-gradient(135deg,#edf5f0 0%,#f8faf8 48%,#eef4f0 100%);
  background-attachment:fixed;
}
.admin-body:after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:linear-gradient(rgba(7,91,54,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(7,91,54,.025) 1px,transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 90%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 90%);
}
.admin-main .content-wrap{background:transparent}
.topbar{background:rgba(255,255,255,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}

/* Login: premium soft green-gold background. */
.login-wrap{
  background:
    radial-gradient(620px 420px at 92% 8%,rgba(214,173,54,.16),transparent 62%),
    radial-gradient(620px 480px at 6% 92%,rgba(7,91,54,.15),transparent 64%),
    linear-gradient(135deg,#edf6f1 0%,#f9faf7 52%,#f4f0e2 100%);
  position:relative;overflow:hidden;
}
.login-wrap:before{
  content:"";position:absolute;inset:0;opacity:.28;pointer-events:none;
  background-image:linear-gradient(rgba(7,91,54,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(7,91,54,.035) 1px,transparent 1px);
  background-size:34px 34px;
}
.login-card{position:relative;z-index:1;box-shadow:0 28px 80px rgba(25,55,43,.15)}

/* =========================================================
   FINAL POLISH - ADMIN HEADER + TECHNOLOGY LOGIN
   ========================================================= */
/* Restore the green-gold admin dashboard header. */
.admin-body .topbar{
  position:sticky;
  top:0;
  z-index:900;
  min-height:76px;
  padding:15px 25px;
  color:#fff !important;
  background:
    radial-gradient(circle at 84% -15%,rgba(214,173,54,.25),transparent 27%),
    linear-gradient(105deg,#043b27 0%,#075b36 55%,#06452d 100%) !important;
  border-bottom:1px solid rgba(214,173,54,.46) !important;
  box-shadow:0 8px 28px rgba(4,61,39,.16) !important;
  overflow:hidden;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.admin-body .topbar:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.10;
  background-image:
    linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px);
  background-size:30px 30px;
}
.admin-body .topbar:after{
  content:"";
  position:absolute;
  width:340px;height:340px;
  right:-150px;top:-205px;
  border:1px solid rgba(245,223,136,.20);
  border-radius:50%;
  box-shadow:0 0 0 28px rgba(245,223,136,.035),0 0 0 65px rgba(255,255,255,.018);
  pointer-events:none;
}
.admin-body .topbar > *{position:relative;z-index:2}
.admin-body .topbar .fw-bold{color:#fff !important;font-size:17px;letter-spacing:.2px}
.admin-body .topbar .small{color:rgba(255,255,255,.68)!important}
.admin-body .topbar .badge{
  padding:9px 13px;
  color:#174431!important;
  background:rgba(255,255,255,.94)!important;
  border:1px solid rgba(214,173,54,.42);
  box-shadow:0 5px 18px rgba(0,0,0,.12);
}
.admin-body .topbar .badge i{color:#087248}

/* Keep sidebar/header visually connected. */
.admin-body .sidebar{
  background:linear-gradient(180deg,#062f20 0%,#092f20 48%,#06261a 100%) !important;
  border-right:1px solid rgba(214,173,54,.22);
}
.admin-body .sidebar-brand{border-bottom:1px solid rgba(255,255,255,.10);padding-bottom:15px}
.admin-body .sidebar nav a{border:1px solid transparent}
.admin-body .sidebar nav a:hover,
.admin-body .sidebar nav a.active{
  background:linear-gradient(90deg,rgba(214,173,54,.16),rgba(255,255,255,.045)) !important;
  border-color:rgba(214,173,54,.16);
}

/* Modern technology login page */
.login-wrap{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:28px 18px;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(650px 500px at 90% 8%,rgba(214,173,54,.22),transparent 62%),
    radial-gradient(650px 520px at 4% 94%,rgba(7,91,54,.22),transparent 64%),
    radial-gradient(460px 360px at 55% 48%,rgba(34,157,107,.09),transparent 68%),
    linear-gradient(135deg,#061f16 0%,#083d29 44%,#f0f5f1 100%);
}
.login-wrap:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  opacity:.28;
  background-image:
    linear-gradient(rgba(255,255,255,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.10) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:linear-gradient(110deg,rgba(0,0,0,.95),rgba(0,0,0,.25),rgba(0,0,0,.75));
  -webkit-mask-image:linear-gradient(110deg,rgba(0,0,0,.95),rgba(0,0,0,.25),rgba(0,0,0,.75));
}
.login-wrap:after{
  content:"";
  position:absolute;
  width:620px;height:620px;
  left:-310px;top:-270px;
  border:1px solid rgba(245,223,136,.22);
  border-radius:50%;
  box-shadow:0 0 0 34px rgba(245,223,136,.035),0 0 0 80px rgba(255,255,255,.018);
  z-index:-1;
}
.login-card{
  width:100%;
  max-width:460px;
  position:relative;
  z-index:2;
  padding:38px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.62);
  border-radius:28px;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(248,251,249,.88));
  box-shadow:0 30px 90px rgba(1,39,25,.28),0 0 0 1px rgba(7,91,54,.06);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.login-card:before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,transparent,#075b36,#d6ad36,#075b36,transparent);
}
.login-card:after{
  content:"";
  position:absolute;
  width:170px;height:170px;
  right:-90px;bottom:-90px;
  border:1px solid rgba(7,91,54,.10);
  border-radius:50%;
  box-shadow:0 0 0 25px rgba(7,91,54,.025),0 0 0 52px rgba(214,173,54,.025);
  pointer-events:none;
}
.logo-login{
  width:92px;height:92px;
  padding:9px;
  object-fit:contain;
  border-radius:24px;
  background:linear-gradient(145deg,#fff,#edf5f0);
  border:1px solid rgba(7,91,54,.10);
  box-shadow:0 12px 30px rgba(7,91,54,.12);
}
.login-card h2{letter-spacing:-.4px}
.login-card .text-muted{color:#6b7c74!important}
.login-card .form-label{color:#23483a;font-size:13px}
.login-card .form-control{
  min-height:50px;
  border:1px solid #d9e6df;
  border-radius:14px;
  background:rgba(255,255,255,.78);
  box-shadow:inset 0 1px 2px rgba(22,63,46,.025);
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.login-card .form-control:focus{
  border-color:#2b9a70;
  background:#fff;
  box-shadow:0 0 0 4px rgba(7,91,54,.09),0 8px 20px rgba(7,91,54,.06);
}
.login-card .btn-success{
  border:0;
  background:linear-gradient(135deg,#075b36,#0b8551 62%,#087248);
  box-shadow:0 12px 25px rgba(7,91,54,.22);
  transition:transform .2s ease,box-shadow .2s ease;
}
.login-card .btn-success:hover{transform:translateY(-2px);box-shadow:0 16px 30px rgba(7,91,54,.28)}
.login-card .alert{border-radius:13px;border:0}
.login-card > .text-center:first-child:after{
  content:"SECURE DIGITAL ACCESS • PA DENPASAR";
  display:block;
  margin-top:12px;
  font-size:8px;
  font-weight:800;
  letter-spacing:1.8px;
  color:#8b7650;
}
.login-card .small.text-decoration-none{color:#075b36!important;font-weight:600}

@media(max-width:767px){
  .admin-body .topbar{min-height:68px;padding:12px 16px}
  .admin-body .topbar .fw-bold{font-size:15px}
  .login-wrap{padding:18px 14px;background:linear-gradient(145deg,#062e20,#0a5b39 35%,#edf4ef 100%)}
  .login-card{padding:30px 22px;border-radius:24px}
  .logo-login{width:82px;height:82px;border-radius:20px}
}

/* ===== V8 - Unified public page background with Login ===== */
/* Index/portal and login now share the same elegant technology atmosphere. */
html:has(.login-wrap){
  background:#061c15;
}
body:not(.admin-body){
  background:
    radial-gradient(circle at 12% 5%,rgba(7,114,72,.20),transparent 30%),
    radial-gradient(circle at 92% 10%,rgba(214,173,54,.18),transparent 34%),
    radial-gradient(circle at 50% 92%,rgba(7,91,54,.12),transparent 38%),
    linear-gradient(135deg,#edf4ef 0%,#faf7ed 52%,#eef5f0 100%);
}
body:not(.admin-body):before{
  opacity:.30;
  background-image:
    linear-gradient(rgba(7,91,54,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(7,91,54,.055) 1px,transparent 1px);
  background-size:36px 36px;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 92%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 92%);
}
body:not(.admin-body):after{
  width:620px;
  height:620px;
  right:-280px;
  top:110px;
  border-color:rgba(7,91,54,.075);
  box-shadow:
    0 0 0 48px rgba(7,91,54,.018),
    0 0 0 100px rgba(214,173,54,.025),
    0 0 90px rgba(7,91,54,.045);
}
/* Login keeps the same exact background language while retaining its own layout. */
.login-wrap{
  background:
    radial-gradient(circle at 12% 5%,rgba(7,114,72,.20),transparent 30%),
    radial-gradient(circle at 92% 10%,rgba(214,173,54,.18),transparent 34%),
    radial-gradient(circle at 50% 92%,rgba(7,91,54,.12),transparent 38%),
    linear-gradient(135deg,#edf4ef 0%,#faf7ed 52%,#eef5f0 100%);
  position:relative;
  overflow:hidden;
}
.login-wrap:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.30;
  background-image:
    linear-gradient(rgba(7,91,54,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(7,91,54,.055) 1px,transparent 1px);
  background-size:36px 36px;
}
.login-wrap:after{
  content:"";
  position:absolute;
  width:620px;
  height:620px;
  right:-280px;
  top:80px;
  border:1px solid rgba(7,91,54,.075);
  border-radius:50%;
  box-shadow:
    0 0 0 48px rgba(7,91,54,.018),
    0 0 0 100px rgba(214,173,54,.025);
  pointer-events:none;
}
.login-card{position:relative;z-index:2}

/* =========================================================
   V9 - Compact Banner + Sticky Bottom Footers
   ========================================================= */

/* Public pages: keep footer at the bottom even when content is short. */
body:not(.admin-body){
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
body:not(.admin-body) > .navbar-premium{flex:0 0 auto}
body:not(.admin-body) > main.container{flex:1 0 auto;width:100%}
body:not(.admin-body) > .site-footer{flex:0 0 auto}
.login-wrap{flex:1 0 auto;width:100%}

/* Compact technology banner on the index page. */
.portal-hero{
  min-height:205px;
  padding:30px 36px;
  border-radius:24px;
}
.portal-hero-content{max-width:650px}
.portal-hero h1{
  font-size:clamp(28px,3.2vw,42px);
  letter-spacing:-1.2px;
  margin-bottom:8px;
}
.portal-hero p{
  max-width:590px;
  font-size:12.5px;
  line-height:1.6;
}
.hero-meta{gap:7px;margin-top:15px}
.hero-meta span{padding:6px 10px;font-size:9px}
.portal-hero-logo{
  right:52px;
  width:118px;
  height:118px;
}
.portal-hero-logo img{width:80px;height:80px}
.logo-halo{box-shadow:0 0 0 11px rgba(245,223,136,.035),0 0 0 24px rgba(255,255,255,.025),0 0 40px rgba(245,223,136,.10)}
.portal-ring-1{width:300px;height:300px;right:-70px;top:-48px}
.portal-ring-2{width:215px;height:215px;right:-12px;top:8px}
.portal-hero-glow{width:250px;height:250px;right:50px;top:-110px}

/* Keep the admin footer at the bottom of short pages (Users/Categories). */
.admin-main{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.admin-main > .topbar{flex:0 0 auto}
.admin-main > .content-wrap{flex:1 0 auto;width:100%}
.admin-main > .admin-footer{flex:0 0 auto;margin-top:auto}

@media(max-width:991px){
  .portal-hero{min-height:195px;padding:27px 30px}
  .portal-hero-logo{right:34px}
}
@media(max-width:767px){
  .portal-hero{
    min-height:0;
    padding:25px 22px;
    border-radius:20px;
  }
  .portal-hero-content{max-width:100%}
  .portal-hero h1{font-size:29px}
  .portal-hero p{font-size:12px;max-width:100%;padding-right:8px}
  .portal-hero-logo{
    position:relative;
    right:auto;top:auto;
    transform:none;
    width:78px;height:78px;
    margin:18px 0 0 auto;
  }
  .portal-hero-logo img{width:54px;height:54px}
  .logo-halo{inset:0}
  .portal-ring-1{width:210px;height:210px;right:-75px;top:-45px}
  .portal-ring-2{width:150px;height:150px;right:-30px;top:-5px}
  .hero-meta span{font-size:8px;padding:6px 8px}
}


/* Index redesign: compact technology header, no banner */
.index-heading-row{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
  padding:4px 2px 2px;
}
.section-kicker{font-size:10px;font-weight:800;letter-spacing:1.6px;color:#087248;text-transform:uppercase;margin-bottom:5px}
.index-title{font-size:clamp(24px,3vw,34px);font-weight:800;letter-spacing:-.6px;color:#18362a}
.index-subtitle{font-size:13px;color:#718078}
.index-count{font-size:12px;font-weight:700;color:#087248;background:rgba(255,255,255,.72);border:1px solid rgba(8,114,72,.14);padding:9px 14px;border-radius:999px;box-shadow:0 8px 22px rgba(24,54,42,.06);white-space:nowrap}
.header-layout{display:grid!important;grid-template-columns:minmax(250px,1fr) minmax(280px,520px) auto;align-items:center;gap:18px}
.brand-copy{min-width:0}.brand-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.header-search{width:100%;min-width:0}
.admin-search-form{position:relative;display:flex;align-items:center;min-width:280px;width:min(420px,100%)}
.admin-search-form>i{position:absolute;left:14px;color:#718078;z-index:2}
.admin-search-form input{width:100%;height:42px;border:1px solid rgba(8,114,72,.15);border-radius:13px;background:rgba(255,255,255,.86);padding:0 42px 0 40px;outline:none;box-shadow:0 8px 22px rgba(24,54,42,.05);transition:.2s ease}
.admin-search-form input:focus{border-color:rgba(8,114,72,.45);box-shadow:0 0 0 4px rgba(8,114,72,.08),0 10px 24px rgba(24,54,42,.08)}
.admin-search-form .clear-search{position:absolute;right:13px;color:#8b9791;text-decoration:none}
.applications-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.search-result-note{font-size:12px;color:#7a8781;padding-left:3px}
@media (max-width: 991.98px){
 .header-layout{grid-template-columns:1fr auto}.header-search{grid-column:1/-1;grid-row:2}
 .index-heading-row{align-items:flex-start;flex-direction:column}.index-count{align-self:flex-start}
}
@media (max-width: 575.98px){
 .index-heading-row{padding-top:0}.index-title{font-size:25px}.index-subtitle{font-size:12px}
 .applications-toolbar{align-items:stretch}.admin-search-form{width:100%;min-width:0}.applications-toolbar>div:last-child{width:100%}.applications-toolbar .btn{width:100%}
 .brand-title{font-size:14px}.brand-sub{font-size:9px}.header-layout{gap:10px}
}
/* Disable legacy public portal hero/banner */
.portal-hero{display:none!important}
/* Final index/admin toolbar refinement */
.index-heading-row{display:none!important}
.applications-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 16px;border:1px solid rgba(8,114,72,.10);border-radius:18px;background:rgba(255,255,255,.72);backdrop-filter:blur(14px);box-shadow:0 10px 30px rgba(24,54,42,.06)}
.applications-toolbar-title{min-width:0}
.applications-toolbar-title h3{color:#18362a;letter-spacing:-.3px}
.applications-toolbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex:0 0 auto}
.applications-toolbar-actions .admin-search-form{width:clamp(260px,32vw,400px);min-width:260px}
.applications-toolbar-actions .btn{height:42px;white-space:nowrap;box-shadow:0 7px 18px rgba(8,114,72,.16);font-weight:700}
@media(max-width:767.98px){
 .applications-toolbar{align-items:stretch;flex-direction:column;gap:12px}
 .applications-toolbar-actions{width:100%;align-items:stretch;flex-direction:column}
 .applications-toolbar-actions .admin-search-form{width:100%;min-width:0}
 .applications-toolbar-actions .btn{width:100%}
}


/* ===== FINAL ADMIN BANNER / INSTANT SEARCH ===== */
.admin-body .topbar {
  height: 82px;
  min-height: 82px;
  padding: 0 !important;
  background:
    radial-gradient(420px 150px at 12% 20%, rgba(76, 222, 157, .20), transparent 65%),
    radial-gradient(360px 180px at 86% 5%, rgba(245, 210, 102, .22), transparent 65%),
    linear-gradient(110deg, #063b27 0%, #087b4c 48%, #075f3a 100%) !important;
  border-bottom: 1px solid rgba(240, 211, 109, .52) !important;
  box-shadow: 0 12px 30px rgba(4, 61, 39, .15) !important;
}
.admin-body .topbar::before {
  opacity: .14 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px) !important;
  background-size: 30px 30px !important;
}
.admin-body .topbar::after {
  width: 330px !important; height: 330px !important;
  right: -120px !important; top: -210px !important;
  border-color: rgba(245,223,136,.28) !important;
  box-shadow: 0 0 0 28px rgba(245,223,136,.045), 0 0 0 65px rgba(255,255,255,.02) !important;
}
.admin-body .topbar > * { display:none !important; }
.admin-search-form .clear-search {
  border:0; background:transparent; padding:4px; cursor:pointer;
}
.admin-search-form .clear-search[hidden] { display:none !important; }
.admin-search-form input[type="search"]::-webkit-search-cancel-button { display:none; }
.applications-toolbar {
  background:
    radial-gradient(300px 100px at 100% 0%, rgba(214,173,54,.10), transparent 70%),
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(239,248,243,.88)) !important;
  border-color: rgba(8,114,72,.13) !important;
}
@media (max-width: 767.98px) {
  .admin-body .topbar { height: 62px; min-height: 62px; }
}