:root{
  --ink: #241C17;
  --ink-soft: #6B5B4C;
  --ink-faint: #9C8E7C;
  --paper: #F7F1E6;
  --card: #FFFDF8;
  --line: #E6DAC4;
  --gold: #B3912E;
  --gold-soft: #F3E9C8;
  --sage: #4C7A5C;
  --sage-soft: #E2EEE4;
  --rust: #A2452D;
  --rust-soft: #F5DED2;
  --blue: #3D5A80;
  --blue-soft: #DFE7F1;
  --wine: #A4374A;
  --wine-soft: #F6E2E6;
  --wine-dark: #7A2638;
  --wa: #1F9D55;
  --wa-dark: #167A41;
  --radius: 12px;
  --shadow-sm: 0 1px 2px rgba(36,28,23,.06), 0 1px 1px rgba(36,28,23,.04);
  --shadow-card: 0 1px 2px rgba(36,28,23,.05), 0 10px 24px -16px rgba(36,28,23,.38);
  --shadow-md: 0 14px 34px -16px rgba(36,28,23,.45);
  --grad-clay: linear-gradient(135deg,#E7C568,var(--gold) 60%,var(--rust));
  --grad-wine: linear-gradient(135deg,#4A1C2B 0%,#331620 45%,#1E0D14 100%);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Inter',sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(900px 420px at 105% -8%, rgba(179,145,46,.14), transparent 62%),
    radial-gradient(760px 460px at -12% 108%, rgba(164,55,74,.08), transparent 60%),
    var(--paper);
  background-attachment:fixed;
}
h1,h2,h3,.serif{ font-family:'Fraunces',serif; }
h1,h2,h3{ margin:0; font-weight:600; color:var(--ink); }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* ---------- APP SHELL ---------- */
#app{ display:flex; min-height:100vh; }

.sidebar{
  width:248px; flex-shrink:0;
  background:linear-gradient(190deg,#3B1826 0%,#281119 52%,#160b10 100%);
  color:#D9CFC2;
  display:flex; flex-direction:column;
  padding:22px 14px;
  box-shadow:var(--shadow-md);
  position:sticky; top:0; height:100vh;
  z-index:2;
  overflow:hidden;
}
.sidebar::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(260px 220px at 100% 0%, rgba(211,187,101,.16), transparent 70%),
    radial-gradient(240px 200px at 0% 70%, rgba(164,55,74,.22), transparent 70%);
}
.sidebar::after{
  content:"";
  position:absolute; left:50%; bottom:92px;
  width:240px; height:240px; transform:translateX(-50%);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23D3BB65' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M100 190 C100 140 95 95 78 60'/%3E%3Cpath d='M78 68 C68 64 58 64 50 70'/%3E%3Cpath d='M83 86 C73 82 63 82 55 88'/%3E%3Cpath d='M88 104 C78 100 68 100 60 106'/%3E%3Cpath d='M93 122 C83 118 73 118 65 124'/%3E%3Cpath d='M97 140 C87 136 77 136 69 142'/%3E%3Cpath d='M99 158 C89 154 79 154 71 160'/%3E%3Cpath d='M100 190 C100 140 105 95 122 60'/%3E%3Cpath d='M122 68 C132 64 142 64 150 70'/%3E%3Cpath d='M117 86 C127 82 137 82 145 88'/%3E%3Cpath d='M112 104 C122 100 132 100 140 106'/%3E%3Cpath d='M107 122 C117 118 127 118 135 124'/%3E%3Cpath d='M103 140 C113 136 123 136 131 142'/%3E%3Cpath d='M101 158 C111 154 121 154 129 160'/%3E%3Cpath d='M100 60 L100 10 M80 30 L100 10 L120 30'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:contain;
  opacity:0.08; pointer-events:none; z-index:-1;
}
.sidebar .brand{
  font-family:'Fraunces',serif; font-weight:600; font-size:17px;
  color:#fff; padding:4px 8px 18px 8px; letter-spacing:0.2px;
  border-bottom:1px solid rgba(211,187,101,0.28); margin-bottom:12px;
  display:flex; align-items:center; gap:11px;
  position:relative; z-index:1;
}
.sidebar .brand img{ width:38px; height:38px; object-fit:contain; flex-shrink:0; border-radius:8px; background:rgba(255,255,255,.06); padding:3px; }
.sidebar .brand span{ display:block; font-family:'Inter',sans-serif; font-weight:400; font-size:12px; color:#C7A9B0; margin-top:3px; }
.nav-group-label{ font-size:11.5px; color:#A98790; margin:16px 10px 6px; position:relative; z-index:1; font-weight:500; }
.nav-item{
  display:flex; align-items:center; gap:11px;
  padding:10px 12px; border-radius:10px; margin-bottom:3px;
  color:#E0CDD2; text-decoration:none; font-size:14px; font-weight:500;
  border:none; background:none; width:100%; text-align:left;
  position:relative; z-index:1;
  transition:background .15s ease, color .15s ease;
}
.nav-item svg{ width:18px; height:18px; flex-shrink:0; opacity:.85; }
.nav-item:hover{ background:rgba(255,255,255,0.08); color:#fff; }
.nav-item.active{ background:var(--grad-clay); color:#2b1607; font-weight:600; box-shadow:0 8px 18px -8px rgba(189,106,55,.7); }
.nav-item.active svg{ opacity:1; }
.sidebar-foot{ margin-top:auto; padding-top:14px; border-top:1px solid rgba(211,187,101,0.22); position:relative; z-index:1; }
.who{ display:flex; align-items:center; gap:10px; }
.who .avatar{ width:34px; height:34px; border-radius:50%; background:var(--grad-clay); color:#2b1607; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; font-family:'Fraunces',serif; box-shadow:0 0 0 2px rgba(255,255,255,.12); }
.who .name{ font-size:13px; font-weight:600; color:#fff; }
.who .role{ font-size:11.5px; color:#C7A9B0; }
.logout-btn{ margin-top:12px; width:100%; padding:8px; font-size:12.5px; border-radius:10px; border:1px solid rgba(211,187,101,0.28); background:rgba(255,255,255,.03); color:#E0CDD2; transition:all .15s ease; }
.logout-btn:hover{ border-color:rgba(255,255,255,0.4); color:#fff; background:rgba(255,255,255,.08); }

.main{ flex:1; min-width:0; }
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 32px; border-bottom:1px solid var(--line);
  background:rgba(247,241,230,.86); backdrop-filter:blur(8px);
  position:sticky; top:0; z-index:5;
}
.topbar .heading .eyebrow{ font-size:12.5px; color:var(--ink-soft); margin-bottom:2px; }
.topbar h1{ font-size:23px; }
.topbar-right{ display:flex; gap:10px; align-items:center; }

.content{ padding:26px 32px 64px; max-width:1360px; }

/* ---------- LONCENG NOTIFIKASI ---------- */
.notif-bell{
  position:relative; width:42px; height:42px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow-sm);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.notif-bell:hover{ border-color:var(--gold); box-shadow:var(--shadow-card); transform:translateY(-1px); }
.notif-bell img{ width:21px; height:21px; display:block; }
.notif-badge{
  position:absolute; top:-4px; right:-4px; min-width:19px; height:19px; padding:0 5px;
  border-radius:20px; background:var(--wine); color:#fff; font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center; border:2px solid var(--paper);
}
.notif-modal-overlay{ display:none; position:fixed; inset:0; background:rgba(20,10,14,.55); backdrop-filter:blur(2px); z-index:80; }
.notif-modal-overlay.show{ display:block; }
.notif-modal{
  display:none; position:fixed; z-index:81; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(520px, calc(100vw - 28px)); max-height:calc(100vh - 40px);
  background:var(--card); border-radius:16px; overflow:hidden; box-shadow:0 30px 70px -20px rgba(20,10,14,.6);
  flex-direction:column;
}
.notif-modal.show{ display:flex; }
.notif-modal-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; background:var(--grad-wine); color:#fff; position:relative; overflow:hidden; }
.notif-modal-head::after{ content:""; position:absolute; right:40px; top:-20px; width:110px; height:110px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23D3BB65' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M100 190 C100 140 95 95 78 60'/%3E%3Cpath d='M78 68 C68 64 58 64 50 70'/%3E%3Cpath d='M83 86 C73 82 63 82 55 88'/%3E%3Cpath d='M88 104 C78 100 68 100 60 106'/%3E%3Cpath d='M93 122 C83 118 73 118 65 124'/%3E%3Cpath d='M97 140 C87 136 77 136 69 142'/%3E%3Cpath d='M99 158 C89 154 79 154 71 160'/%3E%3Cpath d='M100 190 C100 140 105 95 122 60'/%3E%3Cpath d='M122 68 C132 64 142 64 150 70'/%3E%3Cpath d='M117 86 C127 82 137 82 145 88'/%3E%3Cpath d='M112 104 C122 100 132 100 140 106'/%3E%3Cpath d='M107 122 C117 118 127 118 135 124'/%3E%3Cpath d='M103 140 C113 136 123 136 131 142'/%3E%3Cpath d='M101 158 C111 154 121 154 129 160'/%3E%3Cpath d='M100 60 L100 10 M80 30 L100 10 L120 30'/%3E%3C/g%3E%3C/svg%3E"); background-size:contain; background-repeat:no-repeat; opacity:.14; }
.notif-modal-head h3{ color:#fff; font-size:17px; display:flex; align-items:center; gap:10px; position:relative; z-index:1; }
.notif-modal-head h3 img{ width:20px; height:20px; filter:invert(1); }
.notif-close{ background:rgba(255,255,255,.12); border:none; color:#fff; width:30px; height:30px; border-radius:50%; font-size:14px; position:relative; z-index:1; }
.notif-close:hover{ background:rgba(255,255,255,.22); }
.notif-modal-body{ padding:8px 20px 6px; overflow-y:auto; }
.notif-section{ padding:12px 0; border-bottom:1px solid var(--line); }
.notif-section:last-child{ border-bottom:none; }
.notif-section-title{ font-size:13px; font-weight:700; margin-bottom:8px; }
.notif-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 12px; border-radius:9px; background:#FBF7EC; margin-bottom:6px; font-size:13.5px; }
.notif-item-name{ font-weight:600; }
.notif-empty{ font-size:12.5px; color:var(--ink-faint); padding:6px 2px; }
.notif-modal-foot{ display:flex; justify-content:flex-end; gap:8px; padding:14px 20px; border-top:1px solid var(--line); background:#FBF7EC; }

/* ---------- BUTTONS ---------- */
.btn{ padding:9px 16px; border-radius:10px; font-size:13.5px; font-weight:600; border:1px solid transparent; display:inline-flex; align-items:center; gap:7px; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease; white-space:nowrap; }
.btn svg{ width:16px; height:16px; flex-shrink:0; }
.btn-primary{ background:linear-gradient(160deg,var(--wine),var(--wine-dark)); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover{ box-shadow:var(--shadow-card); transform:translateY(-1px); }
.btn-gold{ background:var(--grad-clay); color:#2b1607; box-shadow:0 6px 16px -8px rgba(189,106,55,.7); }
.btn-gold:hover{ box-shadow:0 8px 20px -8px rgba(189,106,55,.85); transform:translateY(-1px); }
.btn-outline{ background:var(--card); color:var(--ink); border-color:var(--line); box-shadow:var(--shadow-sm); }
.btn-outline:hover{ border-color:var(--ink-faint); box-shadow:var(--shadow-card); }
.btn-export{ background:linear-gradient(160deg,#6FA482,var(--sage)); color:#fff; border-color:transparent; box-shadow:0 6px 16px -8px rgba(76,122,92,.6); }
.btn-export:hover{ box-shadow:0 8px 20px -8px rgba(76,122,92,.8); transform:translateY(-1px); }
.btn-wa{ background:linear-gradient(160deg,#2DB866,var(--wa-dark)); color:#fff; box-shadow:0 6px 16px -8px rgba(31,157,85,.7); }
.btn-wa:hover{ box-shadow:0 8px 20px -8px rgba(31,157,85,.85); transform:translateY(-1px); }
.btn-wa[disabled]{ opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-ghost{ background:none; color:var(--ink-soft); border-color:transparent; padding:9px 10px; }
.btn-ghost:hover{ color:var(--ink); }
.btn-danger{ background:var(--rust-soft); color:var(--rust); border-color:#E9C2B3; }
.btn-danger:hover{ background:#F0CDBE; }
.btn-sm{ padding:6px 11px; font-size:12.5px; }
.btn-danger-text{ background:none; border:none; color:var(--rust); font-size:12.5px; font-weight:600; padding:5px 8px; cursor:pointer; }
.btn-disabled{ opacity:.45; pointer-events:none; }

/* ---------- HERO (banner dashboard) ---------- */
.hero{
  position:relative; overflow:hidden; border-radius:18px; padding:28px 32px; margin-bottom:22px;
  background:var(--grad-wine); color:#fff; box-shadow:var(--shadow-md);
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(420px 260px at 88% 10%, rgba(211,187,101,.30), transparent 65%),
    radial-gradient(360px 240px at 0% 120%, rgba(164,55,74,.45), transparent 65%);
}
.hero::after{
  content:""; position:absolute; right:-10px; bottom:-34px; width:270px; height:270px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23D3BB65' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M100 190 C100 140 95 95 78 60'/%3E%3Cpath d='M78 68 C68 64 58 64 50 70'/%3E%3Cpath d='M83 86 C73 82 63 82 55 88'/%3E%3Cpath d='M88 104 C78 100 68 100 60 106'/%3E%3Cpath d='M93 122 C83 118 73 118 65 124'/%3E%3Cpath d='M97 140 C87 136 77 136 69 142'/%3E%3Cpath d='M99 158 C89 154 79 154 71 160'/%3E%3Cpath d='M100 190 C100 140 105 95 122 60'/%3E%3Cpath d='M122 68 C132 64 142 64 150 70'/%3E%3Cpath d='M117 86 C127 82 137 82 145 88'/%3E%3Cpath d='M112 104 C122 100 132 100 140 106'/%3E%3Cpath d='M107 122 C117 118 127 118 135 124'/%3E%3Cpath d='M103 140 C113 136 123 136 131 142'/%3E%3Cpath d='M101 158 C111 154 121 154 129 160'/%3E%3Cpath d='M100 60 L100 10 M80 30 L100 10 L120 30'/%3E%3C/g%3E%3C/svg%3E"); background-size:contain; background-repeat:no-repeat; opacity:.17; pointer-events:none;
}
.hero-text{ position:relative; z-index:1; max-width:560px; }
.hero h2{ color:#fff; font-size:27px; line-height:1.25; margin-bottom:8px; }
.hero p{ color:#E3CDD3; font-size:14px; line-height:1.6; }
.hero-chips{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.hero-chip{ display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:30px; background:rgba(255,255,255,.1); border:1px solid rgba(211,187,101,.35); font-size:12.5px; color:#F5E7C0; }
.hero-chip svg{ width:15px; height:15px; }
.hero-side{ position:relative; z-index:1; display:flex; gap:12px; flex-wrap:wrap; }
.hero-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.hero .btn-outline{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.28); color:#fff; box-shadow:none; }
.hero .btn-outline:hover{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.5); }

/* ---------- CARDS / STATS ---------- */
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.stat-card{
  position:relative; overflow:hidden;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 18px 16px 20px; box-shadow:var(--shadow-card);
}
.stat-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--gold); }
.stat-card::after{
  content:""; position:absolute; right:-30px; top:-30px; width:110px; height:110px; border-radius:50%;
  background:radial-gradient(circle, var(--tint,rgba(179,145,46,.14)), transparent 70%); pointer-events:none;
}
.stat-grid .stat-card:nth-child(4n+1){ --tint:rgba(179,145,46,.16); }
.stat-grid .stat-card:nth-child(4n+2){ --tint:rgba(76,122,92,.16); }
.stat-grid .stat-card:nth-child(4n+3){ --tint:rgba(164,55,74,.14); }
.stat-grid .stat-card:nth-child(4n+4){ --tint:rgba(162,69,45,.16); }
.stat-grid .stat-card:nth-child(4n+1)::before{ background:var(--gold); }
.stat-grid .stat-card:nth-child(4n+2)::before{ background:var(--sage); }
.stat-grid .stat-card:nth-child(4n+3)::before{ background:var(--wine); }
.stat-grid .stat-card:nth-child(4n+4)::before{ background:var(--rust); }
.stat-grid .stat-card:nth-child(4n+1) .value{ color:var(--gold); }
.stat-grid .stat-card:nth-child(4n+2) .value{ color:var(--sage); }
.stat-grid .stat-card:nth-child(4n+3) .value{ color:var(--wine); }
.stat-grid .stat-card:nth-child(4n+4) .value{ color:var(--rust); }
.stat-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; position:relative; z-index:1; }
.stat-card .label{ font-size:12.5px; color:var(--ink-soft); }
.stat-card .ico{ width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--ico-bg,var(--gold-soft)); color:var(--ico-fg,var(--gold)); flex-shrink:0; }
.stat-card .ico svg{ width:18px; height:18px; }
.stat-grid .stat-card:nth-child(4n+2) .ico{ --ico-bg:var(--sage-soft); --ico-fg:var(--sage); }
.stat-grid .stat-card:nth-child(4n+3) .ico{ --ico-bg:var(--wine-soft); --ico-fg:var(--wine); }
.stat-grid .stat-card:nth-child(4n+4) .ico{ --ico-bg:var(--rust-soft); --ico-fg:var(--rust); }
.stat-card .value{ font-family:'Fraunces',serif; font-size:32px; font-weight:600; color:var(--ink); line-height:1.1; position:relative; z-index:1; }
.stat-card .sub{ font-size:12px; margin-top:6px; position:relative; z-index:1; }
.sub.up{ color:var(--sage); } .sub.warn{ color:var(--rust); } .sub.flat{ color:var(--ink-faint); }

.panel{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:20px; box-shadow:var(--shadow-card); overflow:hidden; }
.panel-head{
  display:flex; align-items:center; justify-content:space-between; padding:16px 20px;
  border-bottom:1px solid var(--line); flex-wrap:wrap; gap:10px;
  background:linear-gradient(180deg,#FFFBF1,#FBF6E9);
}
.panel-head h2{ font-size:16.5px; display:flex; align-items:center; gap:10px; }
.panel-head h2::before{ content:""; width:4px; height:18px; border-radius:3px; background:var(--grad-clay); flex-shrink:0; }
.panel-head .desc{ font-size:12.5px; color:var(--ink-soft); margin-top:4px; }
.panel-body{ padding:8px 20px 20px; }

.two-col{ display:grid; grid-template-columns:1.6fr 1fr; gap:18px; align-items:start; }
.two-col.even{ grid-template-columns:1fr 1fr; }

.tile-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px; }
.tile{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; display:flex; gap:14px; align-items:flex-start; text-align:left; width:100%; box-shadow:var(--shadow-card); transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.tile:hover{ border-color:var(--gold); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.tile .icon{ width:42px; height:42px; border-radius:11px; background:var(--grad-clay); color:#2b1607; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 6px 14px -6px rgba(189,106,55,.55); }
.tile .icon svg{ width:21px; height:21px; }
.tile h3{ font-size:15px; margin-bottom:4px; }
.tile p{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; }

/* ---------- PERIODE (pilih mingguan / bulanan / tahunan) ---------- */
.period-bar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.segmented{ display:inline-flex; padding:3px; border-radius:11px; background:#EFE6D2; border:1px solid var(--line); }
.segmented a, .segmented button{
  border:none; background:none; padding:6px 14px; border-radius:8px; font-size:12.5px; font-weight:600; color:var(--ink-soft);
  transition:background .15s ease, color .15s ease;
}
.segmented a:hover, .segmented button:hover{ color:var(--ink); }
.segmented a.on, .segmented button.on{ background:var(--card); color:var(--wine); box-shadow:var(--shadow-sm); }
.period-nav{ display:inline-flex; align-items:center; gap:8px; }
.period-nav .range{ font-family:'Fraunces',serif; font-size:14px; font-weight:600; min-width:150px; text-align:center; color:var(--ink); }
.period-picker{ display:inline-flex; gap:8px; align-items:center; }

/* ---------- TABLE ---------- */
table{ width:100%; border-collapse:collapse; font-size:13.5px; }
th{ text-align:left; font-weight:600; font-size:12px; color:var(--ink-soft); padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap; background:#FBF6E9; }
th:first-child{ border-top-left-radius:8px; } th:last-child{ border-top-right-radius:8px; }
td{ padding:12px; border-bottom:1px solid var(--line); vertical-align:middle; }
tbody tr:hover td, table tr:not(.flag-row):not(.flag-row-opportunity):hover td{ background:#FCF8EC; }
tr:last-child td{ border-bottom:none; }
tr.flag-row td{ background:var(--rust-soft); }
tr.flag-row-opportunity td{ background:var(--blue-soft); }
.name-cell{ font-weight:600; }
.meta-line{ font-size:11.5px; color:var(--ink-faint); margin-top:2px; font-weight:400; }
.person{ display:flex; align-items:center; gap:11px; }
.avatar-sm{ width:34px; height:34px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; font-family:'Fraunces',serif; background:var(--gold-soft); color:var(--gold); }
.avatar-sm.s-berjemaat{ background:var(--wine-soft); color:var(--wine); }
.avatar-sm.s-menetap{ background:var(--sage-soft); color:var(--sage); }
.avatar-sm.s-berkunjung{ background:#ECE8DA; color:var(--ink-soft); }
.avatar-sm.s-tamu{ background:var(--gold-soft); color:var(--gold); }

.badge{ display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:20px; font-size:11.5px; font-weight:600; }
.badge-sage, .badge-menetap{ background:var(--sage-soft); color:var(--sage); }
.badge-rust{ background:var(--rust-soft); color:var(--rust); }
.badge-neutral, .badge-berkunjung{ background:#ECE8DA; color:var(--ink-soft); }
.badge-gold, .badge-tamu{ background:var(--gold-soft); color:var(--gold); }
.badge-member, .badge-berjemaat{ background:var(--wine); color:#fff; }
.badge-opportunity{ background:var(--blue-soft); color:var(--blue); }

.alert-sukses, .alert-success{ margin-bottom:18px; font-size:13px; color:var(--sage); background:var(--sage-soft); border:1px solid #C7DFCC; padding:11px 15px; border-radius:10px; }

.toggle-attend{ display:inline-flex; border:1px solid var(--line); border-radius:20px; overflow:hidden; }
.toggle-attend button{ border:none; background:var(--card); padding:6px 14px; font-size:12px; font-weight:600; color:var(--ink-faint); cursor:pointer; }
.toggle-attend button.on-hadir.selected{ background:var(--sage); color:#fff; }
.toggle-attend button.on-absen.selected{ background:var(--rust); color:#fff; }

.usher-tag{ font-size:11px; color:var(--ink-faint); display:flex; align-items:center; gap:5px; }
.usher-tag .swatch{ width:8px; height:8px; border-radius:2px; flex-shrink:0; background:var(--gold); }

.toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.toolbar-left{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.search-box{ position:relative; }
.search-box input{ padding:9px 12px 9px 34px; border:1px solid var(--line); border-radius:10px; font-size:13px; width:230px; background:#fff; box-shadow:var(--shadow-sm); }
.search-box input:focus{ outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold); }
.search-box::before{ content:"⚲"; position:absolute; left:12px; top:8px; color:var(--ink-faint); font-size:14px; }
select.filter, input.filter{ padding:9px 11px; border:1px solid var(--line); border-radius:10px; font-size:13px; background:#fff; color:var(--ink-soft); box-shadow:var(--shadow-sm); }
.panel-body > form input[type=text], .panel-body > form select{ padding:9px 12px; border:1px solid var(--line); border-radius:10px; font-size:13px; background:#fff; box-shadow:var(--shadow-sm); }
.panel-body > form input[type=text]:focus, .panel-body > form select:focus{ outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold); }

/* ---------- LOGIN ---------- */
.login-wrap{ min-height:100vh; display:flex; }
.login-side{ flex:1.15; background:var(--grad-wine); color:#fff; padding:56px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; }
.login-side .lines{ position:absolute; inset:0; background-image:repeating-linear-gradient(to bottom, transparent 0 39px, rgba(255,255,255,0.04) 39px 40px); }
.login-side::before{ content:""; position:absolute; inset:0; background:radial-gradient(520px 360px at 85% 8%, rgba(211,187,101,.28), transparent 65%), radial-gradient(480px 360px at 0% 110%, rgba(164,55,74,.5), transparent 65%); }
.login-side::after{ content:""; position:absolute; right:-40px; bottom:-30px; width:430px; height:430px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23D3BB65' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M100 190 C100 140 95 95 78 60'/%3E%3Cpath d='M78 68 C68 64 58 64 50 70'/%3E%3Cpath d='M83 86 C73 82 63 82 55 88'/%3E%3Cpath d='M88 104 C78 100 68 100 60 106'/%3E%3Cpath d='M93 122 C83 118 73 118 65 124'/%3E%3Cpath d='M97 140 C87 136 77 136 69 142'/%3E%3Cpath d='M99 158 C89 154 79 154 71 160'/%3E%3Cpath d='M100 190 C100 140 105 95 122 60'/%3E%3Cpath d='M122 68 C132 64 142 64 150 70'/%3E%3Cpath d='M117 86 C127 82 137 82 145 88'/%3E%3Cpath d='M112 104 C122 100 132 100 140 106'/%3E%3Cpath d='M107 122 C117 118 127 118 135 124'/%3E%3Cpath d='M103 140 C113 136 123 136 131 142'/%3E%3Cpath d='M101 158 C111 154 121 154 129 160'/%3E%3Cpath d='M100 60 L100 10 M80 30 L100 10 L120 30'/%3E%3C/g%3E%3C/svg%3E"); background-size:contain; background-repeat:no-repeat; opacity:.15; }
.login-side .top{ position:relative; z-index:1; display:flex; align-items:center; gap:14px; }
.login-side .top img{ width:56px; height:56px; object-fit:contain; border-radius:12px; background:rgba(255,255,255,.07); padding:4px; }
.login-side .brand-mark{ font-family:'Fraunces',serif; font-size:20px; font-weight:600; }
.login-side .brand-mark span{ display:block; font-family:'Inter',sans-serif; font-size:12px; font-weight:400; color:#C7A9B0; margin-top:4px; }
.login-side .quote{ position:relative; z-index:1; max-width:440px; }
.login-side .quote h2{ font-family:'Fraunces',serif; font-size:32px; font-weight:600; color:#fff; line-height:1.3; }
.login-side .quote p{ font-size:14px; color:#D9BFC5; margin-top:14px; line-height:1.7; }
.login-points{ position:relative; z-index:1; display:flex; gap:10px; flex-wrap:wrap; }
.login-points span{ display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:30px; background:rgba(255,255,255,.08); border:1px solid rgba(211,187,101,.32); font-size:12.5px; color:#F5E7C0; }
.login-points svg{ width:15px; height:15px; }
.login-form-wrap{ width:470px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:transparent; }
.login-card{ width:100%; max-width:340px; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:30px 28px; box-shadow:var(--shadow-md); position:relative; }
.login-card::before{ content:""; position:absolute; left:28px; right:28px; top:0; height:3px; border-radius:0 0 4px 4px; background:var(--grad-clay); }
.login-form{ width:100%; }
.login-form .logo-mobile{ display:none; text-align:center; margin-bottom:18px; }
.login-form .logo-mobile img{ width:64px; height:64px; object-fit:contain; }
.login-form h1{ font-size:24px; margin-bottom:6px; }
.login-form .lede{ font-size:13px; color:var(--ink-soft); margin-bottom:22px; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:5px; }
.field input{ width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:10px; font-size:13.5px; background:#fff; box-shadow:var(--shadow-sm); }
.field input:focus{ outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold); }
.login-form .btn{ width:100%; justify-content:center; padding:12px; margin-top:6px; }
.demo-note{ margin-top:18px; font-size:11.5px; color:var(--ink-faint); background:var(--gold-soft); border:1px solid #E4D3A8; padding:9px 11px; border-radius:10px; line-height:1.5; }
.error-note{ margin-top:14px; font-size:12.5px; color:var(--rust); background:var(--rust-soft); border:1px solid #E4B7A8; padding:9px 11px; border-radius:10px; line-height:1.5; }

/* ---------- FORM ---------- */
.form-section{ margin-bottom:22px; }
.form-section .sec-title{ font-size:13.5px; font-weight:700; color:var(--ink); margin-bottom:3px; }
.form-section .sec-desc{ font-size:12px; color:var(--ink-soft); margin-bottom:14px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-grid .full{ grid-column:1/-1; }
.form-field label{ display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:5px; }
.form-field input, .form-field select, .form-field textarea{ width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px; font-size:13.5px; background:#fff; box-shadow:var(--shadow-sm); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold); }
.choice-row{ display:flex; gap:8px; flex-wrap:wrap; }
.choice-pill{ padding:8px 15px; border:1px solid var(--line); border-radius:20px; font-size:12.5px; font-weight:600; color:var(--ink-soft); background:#fff; cursor:pointer; transition:all .15s ease; }
.choice-pill:hover{ border-color:var(--gold); }
.choice-pill.selected{ border-color:var(--gold); background:var(--gold-soft); color:var(--gold); }
.readonly-box{ background:#F4EFE0; border:1px dashed var(--line); border-radius:10px; padding:10px 12px; font-size:12.5px; color:var(--ink-soft); display:flex; align-items:center; gap:8px; }
.field-error{ color:var(--rust); font-size:11.5px; margin-top:4px; }
.form-hidden{ display:none; }
.form-hidden.show-form{ display:block; }

/* ---------- GRAFIK ---------- */
.bars{ display:flex; align-items:flex-end; gap:12px; height:150px; padding:14px 4px 0; border-bottom:1px solid var(--line); background:repeating-linear-gradient(to top, transparent 0 29px, rgba(230,218,196,.55) 29px 30px); }
.bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:6px; height:100%; }
.bar{ width:100%; max-width:56px; border-radius:7px 7px 0 0; background:linear-gradient(180deg,#EBD9A4,#DCC888); min-height:4px; transition:filter .15s ease, transform .15s ease; }
.bar.clickable{ cursor:pointer; }
.bar.clickable:hover{ filter:brightness(.95); transform:scaleY(1.02); transform-origin:bottom; }
.bar.current{ background:var(--grad-clay); box-shadow:0 8px 16px -8px rgba(189,106,55,.7); }
.bar.picked{ outline:2px solid var(--wine); outline-offset:2px; }
.bar-label{ font-size:11px; color:var(--ink-faint); padding-top:6px; white-space:nowrap; }
.bar-val{ font-size:12px; color:var(--ink-soft); font-weight:700; }

.attention-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 0; border-bottom:1px solid var(--line); }
.attention-item:last-child{ border-bottom:none; }
.attention-item .name{ font-size:13px; font-weight:600; }
.attention-item .meta{ font-size:11.5px; color:var(--ink-faint); margin-top:2px; }

.track-drawer{ background:#FBFAF5; border-top:1px dashed var(--line); }
.track-drawer td{ padding:16px 18px; }
.track-title{ font-size:12px; font-weight:700; color:var(--ink-soft); margin-bottom:10px; }
.track-weeks{ display:flex; gap:6px; flex-wrap:wrap; }
.week-chip{ width:30px; height:30px; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; }
.week-chip.h{ background:var(--sage-soft); color:var(--sage); }
.week-chip.a{ background:var(--rust-soft); color:var(--rust); }

.traffic-row{ display:grid; grid-template-columns:200px 1fr 230px; gap:18px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); }
.traffic-row:last-child{ border-bottom:none; }
.traffic-who .meta-line{ margin-top:3px; }
.traffic-chart{ display:flex; align-items:flex-end; gap:14px; height:60px; }
.tbar-col{ display:flex; flex-direction:column; align-items:center; gap:6px; width:22px; flex-shrink:0; }
.tbar{ width:14px; border-radius:3px 3px 0 0; }
.tbar.h{ background:linear-gradient(180deg,#6FA482,var(--sage)); height:38px; }
.tbar.a{ background:linear-gradient(180deg,#C97C63,var(--rust)); height:10px; }
.tbar-label{ font-size:9px; color:var(--ink-faint); line-height:1.35; text-align:center; white-space:nowrap; }
.traffic-side{ text-align:right; }
.compare-tag{ font-size:11.5px; font-weight:600; padding:6px 10px; border-radius:10px; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.compare-tag.drop{ background:var(--rust-soft); color:var(--rust); }
.compare-tag.rise{ background:var(--sage-soft); color:var(--sage); }
.compare-tag.same-h{ background:var(--sage-soft); color:var(--sage); }
.compare-tag.same-a{ background:var(--rust-soft); color:var(--rust); }
.traffic-side .last-absent{ font-size:11px; color:var(--ink-faint); margin-top:6px; }
.ratio-wrap{ display:flex; align-items:center; gap:12px; }
.ratio-track{ flex:1; height:9px; border-radius:6px; background:var(--rust-soft); overflow:hidden; }
.ratio-fill{ height:100%; border-radius:6px; background:linear-gradient(90deg,#6FA482,var(--sage)); }
.ratio-num{ font-size:12px; font-weight:700; color:var(--ink-soft); min-width:64px; text-align:right; }

.empty-note{
  font-size:12.5px; color:var(--ink-faint); text-align:center;
  padding:46px 4px 20px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32' width='50' height='25'%3E%3Cg fill='none' stroke='%23B3912E' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M32 30 C32 18 30 8 24 2'/%3E%3Cpath d='M24 6 C21 5 18 5 16 7'/%3E%3Cpath d='M26 12 C23 11 20 11 18 13'/%3E%3Cpath d='M28 18 C25 17 22 17 20 19'/%3E%3Cpath d='M30 24 C27 23 24 23 22 25'/%3E%3Cpath d='M32 30 C32 18 34 8 40 2'/%3E%3Cpath d='M40 6 C43 5 46 5 48 7'/%3E%3Cpath d='M38 12 C41 11 44 11 46 13'/%3E%3Cpath d='M36 18 C39 17 42 17 44 19'/%3E%3Cpath d='M34 24 C37 23 40 23 42 25'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center top;
}
.legend{ display:flex; gap:16px; font-size:12px; color:var(--ink-soft); margin-top:2px; }
.legend span{ display:inline-flex; align-items:center; gap:5px; }
.legend i{ width:9px; height:9px; border-radius:2px; display:inline-block; }

/* ---------- KOMPOSISI STATUS & ULANG TAHUN ---------- */
.compo-bar{ display:flex; height:16px; border-radius:10px; overflow:hidden; background:var(--line); margin:10px 0 16px; }
.compo-bar span{ display:block; height:100%; }
.compo-list{ display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; }
.compo-item{ display:flex; align-items:center; gap:9px; font-size:13px; }
.compo-item i{ width:10px; height:10px; border-radius:3px; flex-shrink:0; }
.compo-item b{ margin-left:auto; font-family:'Fraunces',serif; font-size:16px; }
.bday-item{ display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); }
.bday-item:last-child{ border-bottom:none; }
.bday-date{ width:40px; height:44px; border-radius:10px; background:var(--wine-soft); color:var(--wine); display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.1; flex-shrink:0; }
.bday-date b{ font-family:'Fraunces',serif; font-size:17px; }
.bday-date small{ font-size:9.5px; font-weight:600; }
.bday-item.today .bday-date{ background:var(--grad-clay); color:#2b1607; }
.bday-name{ font-size:13px; font-weight:600; }

/* ---------- RINCIAN KEHADIRAN (klik batang tren) ---------- */
.wb-hint{ font-size:12px; color:var(--ink-faint); margin-top:12px; }
.week-breakdown{ margin-top:14px; border-top:1px solid var(--line); padding-top:14px; }
.wb-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; flex-wrap:wrap; gap:6px; }
.wb-title{ font-family:'Fraunces',serif; font-size:15px; font-weight:600; color:var(--ink); }
.wb-total{ font-size:12.5px; color:var(--ink-soft); }
.wb-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.wb-item{ background:#FBF7EC; border:1px solid var(--line); border-radius:10px; padding:12px; transition:border-color .15s ease, box-shadow .15s ease; cursor:pointer; }
.wb-item:hover{ border-color:var(--gold); box-shadow:var(--shadow-sm); }
.wb-label{ font-size:11.5px; color:var(--ink-soft); margin-bottom:6px; line-height:1.4; }
.wb-value{ font-family:'Fraunces',serif; font-size:22px; font-weight:600; color:var(--ink); margin-bottom:4px; }
.wb-pct{ font-size:10.5px; color:var(--ink-faint); margin-bottom:8px; }
.wb-bar-track{ height:5px; background:var(--line); border-radius:3px; overflow:hidden; margin-top:6px; }
.wb-bar-fill{ height:100%; border-radius:3px; }

/* ---------- WA BLAST ---------- */
.wa-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:18px; align-items:start; }
.wa-templates{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.wa-textarea{ width:100%; min-height:170px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; font-size:13.5px; line-height:1.6; background:#fff; box-shadow:var(--shadow-sm); resize:vertical; }
.wa-textarea:focus{ outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold); }
.wa-hint{ font-size:12px; color:var(--ink-faint); margin-top:8px; line-height:1.55; }
.wa-hint code{ background:var(--gold-soft); color:var(--gold); padding:1px 6px; border-radius:5px; font-size:11.5px; }
.wa-preview{ margin-top:16px; border-radius:14px; padding:14px; background:#E7DFCB; background-image:radial-gradient(circle at 20% 20%, rgba(255,255,255,.35), transparent 40%); }
.wa-preview .lbl{ font-size:11.5px; color:var(--ink-soft); margin-bottom:8px; }
.wa-bubble{ max-width:92%; background:#DCF8C6; border-radius:12px 12px 12px 3px; padding:10px 13px; font-size:13px; line-height:1.55; white-space:pre-wrap; word-break:break-word; box-shadow:0 1px 1px rgba(0,0,0,.12); }
.wa-list{ max-height:460px; overflow-y:auto; border:1px solid var(--line); border-radius:12px; background:#fff; }
.wa-row{ display:flex; align-items:center; gap:11px; padding:10px 14px; border-bottom:1px solid var(--line); }
.wa-row:last-child{ border-bottom:none; }
.wa-row input[type=checkbox]{ width:17px; height:17px; accent-color:var(--wine); flex-shrink:0; }
.wa-row .who-wrap{ flex:1; min-width:0; }
.wa-row .nm{ font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wa-row .no{ font-size:11.5px; color:var(--ink-faint); }
.wa-row.sent{ background:var(--sage-soft); }
.wa-row.sent .nm{ color:var(--sage); }
.wa-status{ font-size:11.5px; font-weight:600; color:var(--sage); display:none; }
.wa-row.sent .wa-status{ display:inline-flex; align-items:center; gap:4px; }
.wa-row.sent .btn-send{ display:none; }
.wa-listhead{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.wa-progress{ height:8px; border-radius:6px; background:var(--line); overflow:hidden; margin:12px 0 4px; }
.wa-progress div{ height:100%; width:0; background:linear-gradient(90deg,#2DB866,var(--wa-dark)); transition:width .25s ease; }
.wa-note{ margin-top:14px; font-size:12px; color:var(--ink-soft); background:var(--gold-soft); border:1px solid #E4D3A8; padding:10px 12px; border-radius:10px; line-height:1.6; }
.wa-skip{ margin-top:12px; font-size:12px; color:var(--rust); background:var(--rust-soft); border:1px solid #E9C2B3; padding:9px 12px; border-radius:10px; }

.topbar-left{ display:flex; align-items:center; gap:12px; min-width:0; }
.hamburger{ display:none; flex-shrink:0; width:38px; height:38px; align-items:center; justify-content:center; background:#fff; border:1px solid var(--line); border-radius:9px; font-size:16px; color:var(--ink); }
.sidebar-overlay{ display:none; }

.pagination-wrap{ margin-top:16px; }
.pagination-wrap nav > div > p{ font-size:12px; color:var(--ink-soft); }

@media (max-width: 980px){
  .stat-grid{ grid-template-columns:1fr 1fr; }
  .two-col{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .tile-row{ grid-template-columns:1fr; }
}

@media (max-width: 900px){
  .hamburger{ display:inline-flex; }
  .sidebar{
    position:fixed; top:0; left:0; height:100vh; z-index:60;
    transform:translateX(-100%); transition:transform .25s ease;
    box-shadow:4px 0 24px rgba(10,14,20,0.25);
  }
  .sidebar.open{ transform:translateX(0); }
  .sidebar-overlay.show{ display:block; position:fixed; inset:0; background:rgba(10,14,20,0.45); z-index:55; }
  .topbar{ padding:14px 16px; }
  .topbar h1{ font-size:18px; }
  .content{ padding:18px 16px 60px; }
  .btn-label{ display:none; }
  .topbar-right .btn{ padding:9px 11px; }
}

@media (max-width: 640px){
  .login-side{ display:none; }
  .login-form-wrap{ width:100%; padding:32px 20px; min-height:100vh; }
  .login-form .logo-mobile{ display:block; }

  .stat-grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .stat-card{ padding:12px 13px; }
  .stat-card .value{ font-size:20px; }
  .stat-card .label{ font-size:11.5px; margin-bottom:6px; }

  .panel-head{ flex-direction:column; align-items:flex-start; gap:10px; }
  .panel-head > div:last-child, .panel-head > button{ align-self:stretch; }

  .panel-body{ overflow-x:auto; -webkit-overflow-scrolling:touch; padding:6px 14px 16px; }
  .panel-body table{ min-width:600px; }

  .toolbar{ flex-direction:column; align-items:stretch; gap:10px; }
  .toolbar-left{ flex-direction:column; align-items:stretch; }
  .search-box input, select.filter{ width:100%; }
  .legend{ flex-wrap:wrap; gap:10px; }

  .traffic-row{ grid-template-columns:1fr; gap:12px; }
  .traffic-side{ text-align:left; }
  .traffic-chart{ overflow-x:auto; padding-bottom:2px; }

  .bars{ gap:5px; height:110px; }
  .bar-label, .bar-val{ font-size:9.5px; }

  .wb-grid{ grid-template-columns:1fr 1fr; }
  .wb-head{ flex-direction:column; align-items:flex-start; }

  .login-form{ max-width:none; }
}

@media (max-width: 420px){
  .stat-grid{ grid-template-columns:1fr; }
}

@media (max-width: 480px){
  .form-actions{
    flex-direction: column;
  }
  .form-actions .btn{
    width: 100%;
    justify-content: center;
  }

  .choice-pill{
    padding: 7px 11px;
    font-size: 11.5px;
  }

  .wb-grid{
    grid-template-columns: 1fr 1fr;
  }

  .panel-body{
    padding-left: 12px;
    padding-right: 12px;
  }
}
@media (max-width: 980px){
  .wa-grid{ grid-template-columns:1fr; }
  .two-col.even{ grid-template-columns:1fr; }
}
@media (max-width: 900px){
  .sidebar{ position:fixed; height:100vh; }
  .topbar{ position:static; }
  .hero{ padding:22px 20px; }
  .hero h2{ font-size:22px; }
}
@media (max-width: 640px){
  .login-points{ display:none; }
  .login-card{ box-shadow:var(--shadow-card); }
  .period-bar{ width:100%; }
  .period-nav .range{ min-width:0; flex:1; }
  .compo-list{ grid-template-columns:1fr; }
  .bars{ height:130px; }
  .notif-bell{ width:38px; height:38px; }
  .ratio-num{ min-width:52px; }
}


/* =====================================================================
   FITUR BARU: ulang tahun di lonceng, KK (komsel), ROCKY/ROCKET, persembahan
   ===================================================================== */

/* chip ulang tahun di hero (bisa diklik) */
.hero-chip-btn{ cursor:pointer; font-family:inherit; transition:background .15s ease, border-color .15s ease, transform .12s ease; }
.hero-chip-btn:hover{ background:rgba(255,255,255,.18); border-color:rgba(211,187,101,.7); transform:translateY(-1px); }
.hero-chip-today{ background:rgba(231,197,104,.22); border-color:rgba(231,197,104,.8); color:#FFF3CF; font-weight:600; }

/* daftar ulang tahun */
.bday-scroll{ max-height:340px; overflow-y:auto; }
.bday-meta{ font-size:11.5px; color:var(--ink-faint); margin-top:2px; }
.bday-item.lewat{ opacity:.55; }
.bday-item .badge{ flex-shrink:0; }

/* ulang tahun di popup lonceng */
.notif-sub{ display:block; font-weight:400; font-size:11.5px; color:var(--ink-faint); margin-top:2px; }
.notif-item.ultah-today{ background:var(--gold-soft); border:1px solid #E5D18A; }
.notif-item.ultah-lewat{ opacity:.55; }

/* sub-judul & item komposisi yang berupa link */
.compo-subtitle{ font-size:12px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; margin:20px 0 10px; }
a.compo-item{ color:inherit; text-decoration:none; }
a.compo-item:hover{ color:var(--wine); }
.compo-item small{ color:var(--ink-faint); font-size:11px; }
a.badge{ text-decoration:none; }

/* label kategori usia (ROCKY / ROCKET) & ibadah */
.badge-usia-rocky, .badge-kat-rocky{ background:var(--gold-soft); color:var(--gold); }
.badge-usia-rocket, .badge-kat-rocket{ background:var(--blue-soft); color:var(--blue); }
.badge-kat-umum{ background:var(--wine-soft); color:var(--wine); }
.person .badge{ margin-left:2px; font-size:10.5px; padding:2px 8px; }

/* persembahan */
.offer-total{ font-family:'Fraunces',serif; font-size:30px; font-weight:600; color:var(--wine); line-height:1.1; margin-top:6px; }
.offer-total-label{ font-size:12px; color:var(--ink-faint); margin:4px 0 12px; }
.offer-amt{ font-family:'Fraunces',serif; font-size:15px; white-space:nowrap; }
tfoot td{ background:#FBF6E9; border-bottom:none; border-top:1px solid var(--line); }

/* kartu statistik 3 kolom (halaman KK) */
.stat-grid.stat-grid-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width: 900px){
  .stat-grid.stat-grid-3{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px){
  .stat-grid.stat-grid-3{ grid-template-columns:1fr; }
  .bday-scroll{ max-height:300px; }
}