:root{
  --bg:#F4F6F8; --card:#FFFFFF;
  --text:#1A2B32; --muted:#748490;
  --primary:#2BAE87; --primary-dark:#1E8E6D;
  --green:#2BAE87; --red:#EF5B5B; --blue:#4A90E2;
  --purple:#8B5CF6; --orange:#F59E0B; --pink:#EC4899;
  --yellow:#EAB308; --teal:#14B8A6; --cyan:#06B6D4; --gray:#94A3B8;
  --radius:18px; --radius-sm:12px;
  --shadow:0 4px 20px rgba(0,0,0,.06);
  --shadow-lg:0 10px 30px rgba(43,174,135,.15);
}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Plus Jakarta Sans',-apple-system,sans-serif}
body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
button{cursor:pointer;font-family:inherit}
.hidden{display:none!important}

/* ============ AUTH ============ */
.auth-page{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#2BAE87 0%,#1E8E6D 100%);
  padding:20px; position:relative; overflow:hidden;
}
.auth-bg-blob{
  position:absolute; width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.15),transparent 70%);
  top:-100px; right:-100px;
}
.auth-bg-blob::after{
  content:''; position:absolute; width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.1),transparent 70%);
  bottom:-150px; left:-100px;
}
.auth-box{
  width:100%; max-width:400px; background:#fff; border-radius:24px;
  padding:36px 26px; box-shadow:0 20px 60px rgba(0,0,0,.2);
  position:relative; z-index:1; text-align:center;
}
.auth-box .auth-logo{
  width:90px !important; height:90px !important;
  max-width:90px !important; max-height:90px !important;
  border-radius:20px !important; margin:0 auto 16px !important;
  background:#fff !important; padding:8px !important;
  display:flex !important; align-items:center !important;
  justify-content:center !important;
  box-shadow:0 8px 24px rgba(43,174,135,.35) !important;
  overflow:hidden !important; position:relative !important;
}
.auth-box .auth-logo img{
  width:100% !important; height:100% !important;
  max-width:100% !important; max-height:100% !important;
  object-fit:contain !important; display:block !important;
}
.auth-box h1{color:var(--primary); font-size:1.6rem; margin-bottom:8px; font-weight:800}
.auth-sub{color:var(--muted); font-size:.85rem; margin-bottom:22px; line-height:1.5}
.auth-form{display:flex; flex-direction:column; gap:12px; text-align:left}
.input-group{position:relative}
.input-group i{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  color:var(--muted); font-size:.9rem; pointer-events:none;
}
.input-group input,.input-group select{
  width:100%; padding:14px 14px 14px 44px; border:1.5px solid #E5EAF0;
  border-radius:14px; font-size:.88rem; outline:none; transition:.2s;
  background:#F9FAFC; font-family:inherit; color:var(--text);
}
.input-group select{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23748490' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px;
  padding-right:40px;
}
.input-group input:focus,.input-group select:focus{
  border-color:var(--primary); background:#fff;
  box-shadow:0 0 0 4px rgba(43,174,135,.1);
}
.btn-primary{
  background:linear-gradient(135deg,#2BAE87,#1E8E6D); color:#fff; border:none;
  padding:15px; border-radius:14px; font-weight:700; font-size:.95rem;
  cursor:pointer; transition:.2s; display:flex; align-items:center;
  justify-content:center; gap:8px;
  box-shadow:0 6px 18px rgba(43,174,135,.35);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 8px 22px rgba(43,174,135,.45)}
.btn-secondary{
  background:#F1F4F8; color:#475569; border:none; padding:15px;
  border-radius:14px; font-weight:700; font-size:.95rem; flex:1;
}
.auth-link{margin-top:18px; font-size:.85rem; color:var(--muted)}
.auth-link a{color:var(--primary); font-weight:700}
.alert-error,.alert-success{
  padding:12px 16px; border-radius:12px; font-size:.82rem;
  margin-bottom:14px; text-align:left; display:flex; gap:8px; align-items:center;
}
.alert-error{background:#FEE2E2; color:#991B1B}
.alert-success{background:#DCFCE7; color:#166534}

/* ============ REGISTER — Mode Tabs ============ */
.mode-tabs{
  display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:6px;
}
.mode-tab{position:relative; cursor:pointer}
.mode-tab input{position:absolute; opacity:0; pointer-events:none}
.mode-tab span{
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:12px; border-radius:12px; font-size:.82rem; font-weight:700;
  background:#F1F4F8; color:#64748B; transition:.2s; border:1.5px solid transparent;
}
.mode-tab input:checked + span{
  background:#F0FAF5; color:var(--primary); border-color:var(--primary);
}
.mode-tab span i{font-size:.85rem}
.form-divider{border:none; border-top:1.5px dashed #E5EAF0; margin:14px 0}

/* Invite Box */
.invite-box{
  background:linear-gradient(135deg,#F0FAF5,#E0F2FE);
  border:1.5px dashed #2BAE87; border-radius:16px;
  padding:18px 16px; margin:18px 0; text-align:center;
}
.invite-box p{font-size:.82rem; color:#475569; margin-bottom:10px; line-height:1.5}
.invite-code{
  font-family:'Courier New',monospace;
  font-size:1.8rem; font-weight:800; letter-spacing:4px;
  color:var(--primary-dark); background:#fff;
  padding:12px 16px; border-radius:12px; margin:8px 0;
  border:1px solid rgba(43,174,135,.3);
  display:inline-block; user-select:all;
}
.invite-hint{font-size:.72rem!important; color:#64748B!important; margin-top:10px!important}
/* ============ APP ============ */
.app-container{
  width:100%; max-width:480px; background:var(--bg); min-height:100vh;
  margin:0 auto; padding-bottom:40px; position:relative;
  box-shadow:0 0 30px rgba(0,0,0,.05);
}

/* ============ HEADER / HERO ============ */
.hero{
  background-image:
    linear-gradient(135deg, rgba(20,60,50,.72) 0%, rgba(30,142,109,.55) 100%),
    var(--hero-bg, url('https://images.unsplash.com/photo-1511895426328-dc8714191300?w=900&q=80'));
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  padding:24px 20px 80px;
  border-bottom-left-radius:32px;
  border-bottom-right-radius:32px;
  color:#fff;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.35) 100%);
  pointer-events:none; z-index:0;
}
.hero::after{
  content:''; position:absolute; width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%);
  top:-80px; right:-60px; z-index:0;
}
.hero-top{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:22px; position:relative; z-index:2; gap:12px;
}
.hero-brand{display:flex; align-items:center; gap:12px; flex:1; min-width:0}
.brand-logo{
  width:48px; height:48px; border-radius:14px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.7);
  padding:5px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(10px);
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}
.brand-logo img{width:100%; height:100%; object-fit:contain; display:block}
.brand-text{min-width:0; flex:1}
.brand-text .greet{font-size:.72rem; opacity:.9; margin-bottom:2px; text-shadow:0 1px 4px rgba(0,0,0,.4)}
.brand-text h3{
  font-size:1rem; font-weight:700;
  display:flex; align-items:center; gap:6px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-shadow:0 2px 6px rgba(0,0,0,.4);
}
.user-chip{display:flex; align-items:center; gap:12px}
.avatar{
  width:48px; height:48px; border-radius:16px; background:rgba(255,255,255,.25);
  backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:1.15rem; border:1px solid rgba(255,255,255,.35);
  flex-shrink:0;
}
.greet{font-size:.72rem; opacity:.9; margin-bottom:2px}
.user-chip h3{font-size:1rem; font-weight:700; display:flex; align-items:center; gap:6px}
.role-tag{
  font-size:.6rem; background:rgba(0,0,0,.35); padding:2px 8px;
  border-radius:20px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  flex-shrink:0; border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(4px);
}
.icon-btn{
  width:42px; height:42px; border-radius:14px;
  border:1px solid rgba(255,255,255,.5);
  background:rgba(0,0,0,.25); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; transition:.2s; cursor:pointer;
  flex-shrink:0; backdrop-filter:blur(6px);
}
.icon-btn:hover{background:rgba(0,0,0,.45); transform:translateY(-2px)}

.saldo-card{
  position:relative; z-index:1; padding:4px 0;
  text-shadow:0 2px 8px rgba(0,0,0,.35);
}
.saldo-card p{font-size:.75rem; opacity:.9; margin-bottom:6px}
.saldo-card h1{
  font-size:2rem; font-weight:800; margin-bottom:16px; letter-spacing:-.5px;
  text-shadow:0 3px 12px rgba(0,0,0,.45);
}
.saldo-row{display:flex; gap:24px}
.saldo-row > div{font-size:.7rem; opacity:.95}
.saldo-row > div i{font-size:.75rem; margin-right:4px}
.saldo-row > div b{font-size:.85rem; font-weight:700; display:block; margin-top:2px}

/* MINI STATS */
.mini-stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  padding:0 16px; margin-top:-60px; position:relative; z-index:3;
}
.mini-card{
  background:#fff; border-radius:16px; padding:14px 12px;
  box-shadow:var(--shadow); display:flex; flex-direction:column;
  gap:8px; align-items:flex-start;
}
.mini-icon{
  width:36px; height:36px; border-radius:10px; display:flex;
  align-items:center; justify-content:center; color:#fff; font-size:.85rem;
}
.mini-card p{font-size:.65rem; color:var(--muted); font-weight:600; margin-bottom:2px}
.mini-card b{font-size:.72rem; color:var(--text); font-weight:800; word-break:break-all}

/* MENU */
.menu-section{padding:22px 16px 0}
.menu-section h3{
  font-size:.92rem; margin-bottom:14px; color:var(--text);
  display:flex; align-items:center; gap:8px; font-weight:700;
}
.menu-section h3 i{color:var(--primary); font-size:.85rem}
.menu-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.menu-card{
  background:#fff; border-radius:18px; padding:16px 10px 14px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  box-shadow:var(--shadow); transition:.25s; position:relative;
  border:1px solid rgba(0,0,0,.02);
}
.menu-card:hover{transform:translateY(-4px); box-shadow:0 10px 24px rgba(0,0,0,.08)}
.menu-icon{
  width:48px; height:48px; border-radius:14px; display:flex;
  align-items:center; justify-content:center; color:#fff; font-size:1.1rem;
  box-shadow:0 6px 14px rgba(0,0,0,.12);
}
.menu-label{font-size:.72rem; font-weight:700; color:var(--text); text-align:center; line-height:1.25}
.badge-count{
  position:absolute; top:8px; right:8px; background:var(--primary);
  color:#fff; font-size:.6rem; font-weight:700; padding:2px 7px;
  border-radius:20px; min-width:20px; text-align:center;
}

/* COLORS */
.bg-green{background:linear-gradient(135deg,#2BAE87,#1E8E6D)}
.bg-red{background:linear-gradient(135deg,#EF5B5B,#DC2626)}
.bg-blue{background:linear-gradient(135deg,#4A90E2,#3B7DD8)}
.bg-purple{background:linear-gradient(135deg,#8B5CF6,#7C3AED)}
.bg-orange{background:linear-gradient(135deg,#F59E0B,#D97706)}
.bg-pink{background:linear-gradient(135deg,#EC4899,#DB2777)}
.bg-yellow{background:linear-gradient(135deg,#EAB308,#CA8A04)}
.bg-teal{background:linear-gradient(135deg,#14B8A6,#0D9488)}
.bg-cyan{background:linear-gradient(135deg,#06B6D4,#0891B2)}
.bg-gray{background:linear-gradient(135deg,#94A3B8,#64748B)}

/* APP HEADER SMALL */
.app-header.small{
  padding:16px 18px; display:flex; justify-content:space-between;
  align-items:center; color:#fff; border-bottom-left-radius:24px;
  border-bottom-right-radius:24px; box-shadow:0 4px 14px rgba(0,0,0,.08);
}
.app-header .header-title{display:flex; align-items:center; gap:10px; flex:1; justify-content:center}
.app-header .header-title i{font-size:1.1rem}
.app-header .header-title h3{font-size:1rem; font-weight:700}
.app-header .icon-btn{width:38px; height:38px; border-radius:12px}
/* CONTENT */
.content-area{padding:20px 16px}
.crud-form{
  background:#fff; padding:20px; border-radius:20px;
  box-shadow:var(--shadow); margin-bottom:20px;
  display:flex; flex-direction:column; gap:8px;
}
.crud-form h4{
  color:var(--primary); font-size:.95rem; margin-bottom:8px;
  display:flex; align-items:center; gap:8px; font-weight:700;
}
.field-label{font-size:.75rem; font-weight:700; color:var(--text); margin-top:6px; margin-bottom:2px}
.crud-form input,.crud-form textarea,.crud-form select{
  padding:12px 14px; border:1.5px solid #E5EAF0; border-radius:12px;
  font-size:.88rem; outline:none; font-family:inherit; background:#F9FAFC;
  transition:.2s; color:var(--text);
}
.crud-form select{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23748490' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px;
  padding-right:40px;
}
.crud-form input:focus,.crud-form textarea:focus,.crud-form select:focus{
  border-color:var(--primary); background:#fff;
  box-shadow:0 0 0 4px rgba(43,174,135,.1);
}
.crud-form textarea{resize:vertical; min-height:70px}
.crud-form input[type=file]{
  padding:10px; cursor:pointer; font-size:.82rem; background:#F9FAFC;
}
.crud-form input[type=file]::file-selector-button{
  background:var(--primary); color:#fff; border:none;
  padding:8px 14px; border-radius:8px; margin-right:10px;
  font-weight:700; cursor:pointer; font-family:inherit; font-size:.78rem;
}
.input-prefix{
  display:flex; align-items:center; border:1.5px solid #E5EAF0;
  border-radius:12px; background:#F9FAFC; overflow:hidden; transition:.2s;
}
.input-prefix:focus-within{border-color:var(--primary); background:#fff; box-shadow:0 0 0 4px rgba(43,174,135,.1)}
.input-prefix span{
  padding:12px 12px 12px 14px; font-weight:700; color:var(--primary);
  font-size:.88rem; background:#F0FAF5;
}
.input-prefix input{
  border:none!important; border-radius:0!important;
  background:transparent!important; box-shadow:none!important;
  flex:1; padding:12px 14px 12px 8px!important; min-width:0;
}
.form-actions{display:flex; gap:8px; margin-top:10px}
.form-actions .btn-primary{flex:2; padding:13px}

/* FORM HEADER + KELOLA KATEGORI */
.form-header{
  display:flex; justify-content:space-between; align-items:center;
  gap:10px; margin-bottom:8px;
}
.btn-manage{
  background:#EEF5FB; color:#3B7DD8; border:none; padding:8px 12px;
  border-radius:10px; font-size:.72rem; font-weight:700; cursor:pointer;
  display:flex; align-items:center; gap:6px; transition:.2s;
}
.btn-manage:hover{background:#DBEAFE; transform:translateY(-1px)}

/* TOTAL BOX */
.total-box{
  background:linear-gradient(135deg,#2BAE87,#1E8E6D); color:#fff;
  padding:18px 20px; border-radius:18px; margin-bottom:20px;
  display:flex; align-items:center; gap:14px;
  box-shadow:0 8px 20px rgba(43,174,135,.25);
}
.total-box i{font-size:1.6rem; opacity:.9}
.total-box p{font-size:.72rem; opacity:.9; margin-bottom:3px}
.total-box h3{font-size:1.3rem; font-weight:800}

/* LIST */
.list-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px}
.list-header h4{font-size:.95rem; color:var(--text); display:flex; align-items:center; gap:8px; font-weight:700}
.list-header h4 i{color:var(--primary); font-size:.85rem}
.list-header small{font-size:.72rem; color:var(--muted); font-weight:600}

.data-list{list-style:none; display:flex; flex-direction:column; gap:10px}
.data-item{
  background:#fff; padding:14px; border-radius:16px;
  box-shadow:var(--shadow); display:flex; gap:12px;
  align-items:flex-start; transition:.2s;
  border-left:4px solid var(--primary);
  animation:fadeIn .3s;
}
.data-item:hover{transform:translateX(2px); box-shadow:0 6px 18px rgba(0,0,0,.08)}
.data-item.done{opacity:.55; border-left-color:#94A3B8}
.data-item.done h5{text-decoration:line-through}
.data-body{flex:1; min-width:0}
.data-item-info h5{font-size:.9rem; color:var(--text); margin-bottom:4px; word-break:break-word; font-weight:700}
.data-item-info .amount{
  display:inline-block; background:#F0FAF5; color:var(--primary-dark);
  padding:3px 9px; border-radius:8px; font-weight:800;
  font-size:.75rem; margin-bottom:4px;
}
.data-item-info .meta{display:block; font-size:.68rem; color:var(--muted); margin-top:4px}
.desc{
  background:#F9FAFC; padding:8px 10px; border-radius:8px;
  font-size:.75rem; color:#4B5563; margin-top:6px; line-height:1.45;
  border-left:3px solid #E5EAF0;
}
.tag{display:inline-block; padding:2px 8px; border-radius:6px; font-size:.65rem; font-weight:700; margin-right:4px}
.tag-priority{background:#FEF3C7; color:#92400E}
.tag-high{background:#FEE2E2; color:#991B1B}
.tag-child{background:#CFFAFE; color:#155E75}
.tag-sub{background:#E0F2FE; color:#075985}
.data-actions{display:flex; flex-direction:column; gap:4px; flex-shrink:0}
.data-actions button{
  background:none; border:none; cursor:pointer; padding:7px;
  border-radius:8px; font-size:.82rem; transition:.2s;
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
}
.btn-edit{color:var(--blue)} .btn-edit:hover{background:#EEF5FB}
.btn-delete{color:var(--red)} .btn-delete:hover{background:#FDEEEE}
.btn-check{color:var(--primary)} .btn-check:hover{background:#F0FAF5}
.empty-state{
  text-align:center; color:var(--muted); font-size:.85rem;
  padding:40px 20px; background:#fff; border-radius:16px;
  line-height:1.6;
}
.empty-state i{font-size:2.5rem; color:#D1D9E0; margin-bottom:10px; display:block}

.app-footer{text-align:center; padding:30px 20px 10px; color:var(--muted); font-size:.72rem; line-height:1.8}
.app-footer .small{font-size:.65rem; opacity:.7}

/* ============ MODAL ============ */
.modal{
  position:fixed; inset:0; z-index:999;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal-overlay{
  position:absolute; inset:0; background:rgba(0,0,0,.5);
  backdrop-filter:blur(2px); animation:fadeIn .2s;
}
.modal-box{
  position:relative; background:#fff; border-radius:20px;
  width:100%; max-width:420px; max-height:85vh; overflow:hidden;
  display:flex; flex-direction:column;
  animation:slideUp .3s ease; box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.modal-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 20px; border-bottom:1px solid #EEF1F5;
}
.modal-header h3{
  font-size:1rem; font-weight:700; color:var(--text);
  display:flex; align-items:center; gap:8px;
}
.modal-header h3 i{color:var(--primary)}
.modal-close{
  width:34px; height:34px; border-radius:10px; border:none;
  background:#F1F4F8; color:#64748B; cursor:pointer; font-size:.9rem;
  display:flex; align-items:center; justify-content:center; transition:.2s;
}
.modal-close:hover{background:#FEE2E2; color:#EF5B5B}
.modal-body{padding:18px 20px; overflow-y:auto}
.modal-desc{font-size:.8rem; color:var(--muted); margin-bottom:14px; line-height:1.5}
.sub-add-row{display:flex; gap:8px; margin-bottom:16px}
.sub-add-row input{
  flex:1; padding:12px 14px; border:1.5px solid #E5EAF0;
  border-radius:12px; font-size:.88rem; outline:none; background:#F9FAFC;
  font-family:inherit;
}
.sub-add-row input:focus{border-color:var(--primary); background:#fff}
.sub-add-row .btn-primary{
  padding:0 18px; min-width:auto; margin-top:0;
  border-radius:12px; box-shadow:0 4px 12px rgba(43,174,135,.3);
}

.sub-list{list-style:none; display:flex; flex-direction:column; gap:8px}
.sub-item{
  display:flex; justify-content:space-between; align-items:center;
  background:#F9FAFC; padding:12px 14px; border-radius:12px;
  border-left:3px solid var(--primary); transition:.2s;
}
.sub-item:hover{background:#F0FAF5}
.sub-name{font-size:.88rem; font-weight:700; color:var(--text)}
.sub-actions{display:flex; gap:4px}
.sub-actions button{
  background:none; border:none; cursor:pointer; padding:7px;
  border-radius:8px; font-size:.8rem; transition:.2s;
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
}
.btn-edit-sub{color:var(--blue)}
.btn-edit-sub:hover{background:#DBEAFE}
.btn-delete-sub{color:var(--red)}
.btn-delete-sub:hover{background:#FEE2E2}
.sub-empty{
  text-align:center; color:var(--muted); font-size:.82rem;
  padding:20px; font-style:italic;
}
/* ============ PROFIL KELUARGA ============ */
.photo-preview{
  width:100%; height:180px; border-radius:16px; overflow:hidden;
  border:2px dashed #D1D9E0; background:#F9FAFC;
  display:flex; align-items:center; justify-content:center;
}
.photo-preview img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.photo-empty{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color:var(--muted); font-size:.82rem; font-weight:600;
}
.photo-empty i{font-size:2rem; color:#CBD5E1}
.btn-danger-outline{
  width:100%; padding:12px; background:#FFF5F5; color:var(--red);
  border:1.5px solid #FEE2E2; border-radius:12px; font-weight:700;
  font-size:.88rem; display:flex; align-items:center; justify-content:center;
  gap:8px; cursor:pointer; transition:.2s; font-family:inherit;
}
.btn-danger-outline:hover{background:#FEE2E2; border-color:#FCA5A5}

/* ============ KALENDER MENSTRUASI ============ */
.cycle-stats{
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px;
}
.cycle-stat-card{
  background:#fff; border-radius:16px; padding:14px;
  box-shadow:var(--shadow); display:flex; align-items:center; gap:12px;
  min-width:0;
}
.cycle-stat-icon{
  width:42px; height:42px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1rem;
}
.cycle-stat-card > div:last-child{min-width:0; flex:1}
.cycle-stat-card p{font-size:.68rem; color:var(--muted); font-weight:600; margin-bottom:3px}
.cycle-stat-card b{font-size:.85rem; color:var(--text); font-weight:800; word-break:break-word}

.calendar-box{
  background:#fff; border-radius:20px; padding:18px;
  box-shadow:var(--shadow); margin-bottom:20px;
}
.calendar-head{
  display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;
}
.calendar-head h3{font-size:1rem; font-weight:800; color:var(--text)}
.cal-nav{
  width:34px; height:34px; border-radius:10px; border:none;
  background:#F1F4F8; color:var(--text); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:.8rem; transition:.2s;
}
.cal-nav:hover{background:#E5EAF0; transform:translateY(-1px)}

.calendar-weekdays{
  display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:6px;
}
.calendar-weekdays > div{
  text-align:center; font-size:.68rem; font-weight:700;
  color:var(--muted); padding:4px 0;
}

.calendar-grid{
  display:grid; grid-template-columns:repeat(7,1fr); gap:4px;
}
.cal-day{
  aspect-ratio:1 / 1;
  display:flex; align-items:center; justify-content:center;
  border-radius:10px; font-size:.78rem; font-weight:700;
  color:var(--text); background:#F9FAFC;
  position:relative; transition:.15s;
}
.cal-day.empty{background:transparent}
.cal-day.period{
  background:linear-gradient(135deg,#EF5B5B,#DC2626); color:#fff;
  box-shadow:0 3px 8px rgba(239,91,91,.3);
}
.cal-day.predicted{
  background:#FEE2E2; color:#991B1B;
  border:1.5px dashed #EF5B5B;
}
.cal-day.fertile{
  background:linear-gradient(135deg,#FBBF24,#F59E0B); color:#fff;
  box-shadow:0 3px 8px rgba(245,158,11,.3);
}
.cal-day.ovulation{
  background:linear-gradient(135deg,#8B5CF6,#7C3AED); color:#fff;
  box-shadow:0 3px 8px rgba(139,92,246,.4);
}
.cal-day.today{
  outline:2.5px solid #2BAE87; outline-offset:-1px;
}
.cal-day.today::after{
  content:''; position:absolute; bottom:3px; left:50%; transform:translateX(-50%);
  width:4px; height:4px; border-radius:50%; background:#2BAE87;
}
.cal-day.today.period::after,
.cal-day.today.fertile::after,
.cal-day.today.ovulation::after{background:#fff}

.calendar-legend{
  display:flex; flex-wrap:wrap; gap:10px 14px; justify-content:center;
  margin-top:14px; padding-top:14px; border-top:1px solid #EEF1F5;
}
.calendar-legend span{
  font-size:.66rem; color:var(--muted); font-weight:600;
  display:flex; align-items:center; gap:5px;
}
.calendar-legend i{
  width:12px; height:12px; border-radius:4px; display:inline-block;
}

.cycle-action{margin-bottom:20px}
.cycle-action .btn-primary{width:100%; padding:14px}

.cycle-item .data-item-info h5{font-size:.88rem}
.cycle-item{border-left-color:#EF5B5B}

/* ============ ANIMATIONS ============ */
@keyframes fadeIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)}}
@keyframes slideUp{
  from{opacity:0; transform:translateY(20px)}
  to{opacity:1; transform:translateY(0)}
}

/* ============ RESPONSIVE ============ */
@media(max-width:380px){
  .menu-grid{grid-template-columns:repeat(2,1fr)}
  .menu-label{font-size:.68rem}
  .mini-stats{grid-template-columns:1fr 1fr}
  .mini-stats .mini-card:last-child{grid-column:span 2}
  .auth-box .auth-logo{width:80px !important; height:80px !important}
  .cycle-stats{grid-template-columns:1fr}
  .calendar-box{padding:14px}
  .cal-day{font-size:.72rem; border-radius:8px}
}
/* ============ STATUS BADGE ============ */
.tag-active{background:#DBEAFE; color:#1E40AF}
.tag-done{background:#DCFCE7; color:#166534}
.tag-cancel{background:#FEE2E2; color:#991B1B}
.tag-reschedule{background:#FEF3C7; color:#92400E}
.tag-compromise{background:#E0E7FF; color:#3730A3}
.tag-rediscuss{background:#FCE7F3; color:#9D174D}
.tag-low{background:#DCFCE7; color:#166534}

.data-item.cancelled{opacity:.5; border-left-color:#94A3B8}
.data-item.cancelled h5{text-decoration:line-through; color:var(--muted)}

/* Info line (target date, sumber rencana) */
.info-line{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  font-size:.72rem; color:#475569; margin-top:5px;
  background:#F8FAFC; padding:5px 9px; border-radius:7px;
}
.info-line.late{
  background:#FEF2F2; color:#991B1B; font-weight:700;
  border-left:3px solid #EF5B5B;
}
.info-line i{font-size:.7rem}

.field-hint{
  font-size:.72rem; font-weight:600; color:var(--muted);
  margin-top:4px; transition:.2s;
}
/* ============ PROGRESS RENCANA KEUANGAN ============ */
.plan-progress{
  margin-top:10px; padding:10px 12px;
  background:#F8FAFC; border-radius:12px;
  border-left:3px solid #14B8A6;
}
.progress-row{margin-bottom:8px}
.progress-row:last-child{margin-bottom:0}
.progress-info{
  display:flex; justify-content:space-between; align-items:center;
  font-size:.72rem; margin-bottom:4px; gap:8px;
}
.progress-label{font-weight:700; color:var(--text); display:flex; align-items:center; gap:6px}
.progress-label i{font-size:.75rem}
.progress-value{color:var(--muted); font-weight:600; font-size:.68rem}
.progress-track{
  width:100%; height:8px; background:#E5EAF0; border-radius:20px;
  overflow:hidden; position:relative;
}
.progress-fill{
  height:100%; border-radius:20px; transition:width .4s ease;
  box-shadow:0 0 8px rgba(0,0,0,.08);
}

.plan-total{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:10px; padding-top:10px; border-top:1px dashed #CBD5E1;
  font-size:.75rem; color:var(--text);
}
.plan-total-pct{
  background:linear-gradient(135deg,#14B8A6,#0D9488); color:#fff;
  padding:3px 10px; border-radius:20px; font-weight:800; font-size:.72rem;
}

/* Info line untuk link ke rencana */
.info-line.plan-link{
  background:#F0FDFA; color:#0F766E;
  border-left:3px solid #14B8A6; font-weight:600;
}
.info-line.plan-link i{color:#14B8A6}