@font-face { font-family:Vazirmatn; src:url('../fonts/Vazirmatn-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:Vazirmatn; src:url('../fonts/Vazirmatn-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:Vazirmatn; src:url('../fonts/Vazirmatn-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:Vazirmatn; src:url('../fonts/Vazirmatn-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:Vazirmatn; src:url('../fonts/Vazirmatn-ExtraBold.woff2') format('woff2'); font-weight:800; font-display:swap; }
@font-face { font-family:Vazirmatn; src:url('../fonts/Vazirmatn-Black.woff2') format('woff2'); font-weight:900; font-display:swap; }

:root {
  --p: #87A922;
  --p-dark: #6b8a1a;
  --p-light: #f4f9eb;
  --p-glow: rgba(135,169,34,0.18);
  --bg: #f0f4f8;
  --white: #ffffff;
  --text: #1e293b;
  --muted: #64748b;
  --danger: #ef4444;
  --border: #e2e8f0;
  --r-xl: 20px;
  --r-lg: 14px;
  --r-md: 10px;
  --sh-sm: 0 1px 3px rgba(0,0,0,0.06), 0 4px 10px rgba(0,0,0,0.04);
  --sh-md: 0 8px 24px rgba(0,0,0,0.08);
  --sh-float: 0 16px 48px rgba(0,0,0,0.13);
  --t: all 0.2s cubic-bezier(0.4,0,0.2,1);
  --sidebar-w: 228px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; font-family:'Vazirmatn',sans-serif; }

body { background:var(--bg); color:var(--text); direction:rtl; font-size:13px; line-height:1.5; height:100vh; overflow:hidden; touch-action:manipulation; }
button, a, input, textarea, .btn, .seg-btn, .mob-link, .r-preset { touch-action:manipulation; }

.app-container { display:flex; height:100vh; }

.sidebar {
  width:var(--sidebar-w);
  background:linear-gradient(180deg,#ffffff 0%, #fbfdf6 100%);
  margin:12px; border-radius:26px 26px var(--r-xl) var(--r-xl);
  padding:0; display:flex; flex-direction:column;
  box-shadow:var(--sh-sm); border:1px solid var(--border); flex-shrink:0;
  overflow:hidden; position:relative;
}

.logo-area {
  padding:22px 18px 18px; border-bottom:1px solid #f1f5f9;
  display:flex; align-items:center; gap:10px;
  position:relative;
  background:linear-gradient(120deg, var(--p-light) 0%, transparent 75%);
}

.logo-area::after {
  content:''; position:absolute; left:0; right:0; bottom:-14px; height:28px;
  background:linear-gradient(180deg, rgba(135,169,34,0.07), transparent);
  border-radius:0 0 50% 50%/0 0 100% 100%;
  pointer-events:none;
}
.logo-icon {
  width:40px; height:40px; background:var(--p-light);
  border-radius:12px; display:flex; align-items:center; justify-content:center;
  color:var(--p); flex-shrink:0;
}
.logo-icon svg, .logo-icon i { width:20px; height:20px; }
.logo-text { font-size:1rem; font-weight:900; color:var(--text); }
.logo-sub { font-size:0.6rem; color:var(--muted); font-weight:700; margin-top:1px; }

.nav-list { flex:1; padding:10px 10px 0; }
.nav-link {
  display:flex; align-items:center; gap:10px;
  padding:10px 13px; text-decoration:none; color:var(--muted);
  font-weight:700; border-radius:var(--r-md); transition:var(--t);
  margin-bottom:7px; font-size:0.83rem;
  cursor:pointer; border:none; width:100%; background:none;
  position:relative;
}
.nav-link svg, .nav-link i { width:17px; height:17px; flex-shrink:0; transition:var(--t); }
.nav-link:hover { background:var(--p-light); color:var(--p); }
.nav-link:hover svg, .nav-link:hover i { transform:scale(1.08); }

.nav-link.active {
  background:linear-gradient(135deg, var(--p) 0%, var(--p-dark) 100%);
  color:white;
  box-shadow:0 6px 16px var(--p-glow), inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -2px 4px rgba(0,0,0,0.12);
  border-radius:12px;
}
.nav-link.active svg, .nav-link.active i { color:white; }

.nav-link.active::before {
  content:''; position:absolute; right:-10px; top:50%; transform:translateY(-50%);
  width:4px; height:60%; border-radius:6px;
  background:var(--p); box-shadow:0 0 8px var(--p);
}

.nav-link.active::after {
  content:''; position:absolute; inset:0; border-radius:12px;
  background:radial-gradient(120% 80% at 80% 0%, rgba(255,255,255,0.25), transparent 60%);
  pointer-events:none;
}

.sidebar-bottom { padding:10px; border-top:1px solid #f1f5f9; margin-top:auto; }
.logout-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:9px 13px; border-radius:var(--r-md);
  border:1.5px solid rgba(239,68,68,0.18); background:transparent;
  color:var(--danger); font-size:0.8rem; font-weight:800; cursor:pointer; transition:var(--t);
}
.logout-btn:hover { background:#fff1f1; border-color:rgba(239,68,68,0.4); }
.logout-btn svg, .logout-btn i { width:15px; height:15px; }

.main-content { flex:1; padding:24px 32px; overflow-y:auto; height:100vh; }
.main-content::-webkit-scrollbar { width:4px; }
.main-content::-webkit-scrollbar-thumb { background:var(--border); border-radius:10px; }

.header-section {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:24px; gap:16px;
}
.header-info h1 { font-size:1.4rem; font-weight:900; margin-bottom:2px; }
.header-info p { color:var(--muted); font-size:0.8rem; }
.header-actions { display:flex; gap:8px; align-items:center; flex-shrink:0; }

.back-link {
  display:inline-flex; align-items:center; gap:5px;
  color:var(--p); font-weight:800; font-size:0.78rem;
  text-decoration:none; padding:5px 10px; border-radius:8px;
  background:var(--p-light); margin-bottom:8px; transition:var(--t);
}
.back-link:hover { background:#e5f3c0; }
.back-link svg, .back-link i { width:14px; height:14px; }

.card {
  background:var(--white); border-radius:var(--r-lg);
  padding:18px; box-shadow:var(--sh-sm);
  border:1px solid var(--border); margin-bottom:16px;
}

.glass-card { background:var(--white); border-radius:var(--r-lg); padding:18px; box-shadow:var(--sh-sm); border:1px solid var(--border); margin-bottom:16px; }

.input-group { margin-bottom:13px; }
.input-group label { display:block; margin-bottom:5px; font-weight:800; font-size:0.76rem; color:var(--text); }
.form-input {
  width:100%; padding:9px 12px; border:1.5px solid var(--border);
  border-radius:var(--r-md); font-size:0.83rem; font-weight:600;
  transition:var(--t); background:#fcfdfe; color:var(--text);
  font-family:'Vazirmatn',sans-serif;
}
.form-input:focus { outline:none; border-color:var(--p); background:white; box-shadow:0 0 0 3px var(--p-light); }
.form-input.ltr { direction:ltr; text-align:left; }
textarea.form-input { resize:none; }

.search-box { position:relative; }
.search-box i, .search-box svg { position:absolute; right:11px; top:50%; transform:translateY(-50%); color:var(--p); width:14px; height:14px; pointer-events:none; }
.search-box input { padding-right:34px !important; }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 20px; border-radius:10px; font-weight:800; font-size:0.8rem;
  cursor:pointer; border:none; transition:var(--t); text-decoration:none;
  font-family:'Vazirmatn',sans-serif; white-space:nowrap;
}
.btn:disabled { opacity:0.55; cursor:not-allowed; transform:none !important; box-shadow:none !important; }
.btn-primary { background:var(--p); color:white; }
.btn-primary:hover:not(:disabled) { background:var(--p-dark); transform:translateY(-1px); box-shadow:0 5px 14px var(--p-glow); }
.btn-ghost { background:white; color:var(--muted); border:1.5px solid var(--border); }
.btn-ghost:hover:not(:disabled) { border-color:var(--p); color:var(--p); background:var(--p-light); }
.btn-danger { background:var(--danger); color:white; }
.btn-danger:hover:not(:disabled) { background:#dc2626; transform:translateY(-1px); box-shadow:0 5px 14px rgba(239,68,68,0.25); }
.btn-icon { width:34px; height:34px; padding:0; border-radius:9px; background:white; border:1.5px solid var(--border); color:var(--muted); }
.btn-icon:hover:not(:disabled) { border-color:var(--p); color:var(--p); background:var(--p-light); }
.btn-icon.renew:hover:not(:disabled) { border-color:#3b82f6; color:#3b82f6; background:#dbeafe; }
.btn-icon svg, .btn-icon i { width:15px; height:15px; }

.btn-center { display:flex; justify-content:center; margin-top:18px; }

.btn-primary.btn-outline { background:white; color:var(--muted); border:1.5px solid var(--border); }
.btn-primary.btn-outline:hover { border-color:var(--p); color:var(--p); background:var(--p-light); }
.btn-primary.btn-danger { background:var(--danger); color:white; border:none; }

.seg { display:flex; background:#f1f5f9; padding:3px; border-radius:9px; gap:2px; }
.seg-btn {
  padding:5px 13px; border-radius:7px; border:none; background:transparent;
  color:var(--muted); font-weight:800; font-size:0.73rem; cursor:pointer;
  transition:var(--t); font-family:'Vazirmatn',sans-serif;
}
.seg-btn.on { background:white; color:var(--p); box-shadow:var(--sh-sm); }

.segmented-control { display:flex; background:#f1f5f9; padding:3px; border-radius:9px; gap:2px; }
.segment-item { padding:5px 13px; border-radius:7px; border:none; background:transparent; color:var(--muted); font-weight:800; font-size:0.73rem; cursor:pointer; transition:var(--t); font-family:'Vazirmatn',sans-serif; }
.segment-item.active { background:white; color:var(--p); box-shadow:var(--sh-sm); }

.tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table { width:100%; border-collapse:collapse; text-align:right; min-width:480px; }
th { padding:10px 14px; color:var(--muted); font-size:0.71rem; font-weight:800; border-bottom:2px solid var(--bg); white-space:nowrap; }
td { padding:10px 14px; border-bottom:1px solid #f4f6f8; font-size:0.82rem; vertical-align:middle; }
tr:last-child td { border-bottom:none; }
tr:hover td { background:#fafdf5; }
.action-btns { display:flex; gap:6px; justify-content:center; }

.action-mob-btn { display:none; }

.u-cards { display:none; }
.u-card {
  background:white; border-radius:14px; padding:14px 16px;
  border:1px solid var(--border); box-shadow:var(--sh-sm);
}
.u-card-top { display:flex; align-items:center; gap:11px; }
.u-card-avatar {
  width:40px; height:40px; border-radius:12px;
  background:var(--p-light); color:var(--p);
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:1rem; flex-shrink:0;
}
.u-card-name { font-weight:900; font-size:0.9rem; }
.u-card-phone { font-size:0.72rem; color:var(--muted); font-family:monospace; direction:ltr; }
.u-card-bot { display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding-top:12px; border-top:1px solid #f4f6f8; }

.badge {
  display:inline-flex; align-items:center; gap:3px;
  padding:3px 9px; border-radius:20px; font-size:0.68rem; font-weight:900;
}
.badge-ok { background:#dcfce7; color:#15803d; }
.badge-warn { background:#fef3c7; color:#d97706; }
.badge-danger { background:#fee2e2; color:#dc2626; }
.badge-muted { background:#f1f5f9; color:var(--muted); }
.badge-dark { background:#3b3d3f; color:#fcfdff; }

.expiry-badge { display:inline-flex; align-items:center; gap:3px; padding:3px 9px; border-radius:20px; font-size:0.68rem; font-weight:900; }
.expiry-badge.ok { background:#dcfce7; color:#15803d; }
.expiry-badge.warning { background:#fef3c7; color:#d97706; }
.expiry-badge.urgent { background:#fee2e2; color:#dc2626; }
.expiry-badge.expired { background:#f1f5f9; color:var(--muted); }

.avatar-wrap {
  width:96px; height:96px; border-radius:50%;
  background:var(--p-light); border:3px solid white;
  box-shadow:0 6px 20px rgba(135,169,34,0.15);
  margin:0 auto 12px; position:relative; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.avatar-wrap img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.avatar-badge {
  position:absolute; bottom:1px; right:1px;
  background:var(--p); color:white; width:24px; height:24px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:2px solid white; box-shadow:0 2px 6px rgba(0,0,0,0.15);
}

.profile-avatar { width:96px; height:96px; border-radius:50%; background:var(--p-light); border:3px solid white; box-shadow:0 6px 20px rgba(135,169,34,0.15); margin:0 auto 12px; position:relative; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.profile-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.avatar-edit-badge { position:absolute; bottom:1px; right:1px; background:var(--p); color:white; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:2px solid white; }

.upload-overlay { position:absolute; inset:0; border-radius:50%; background:rgba(15,23,42,0.5); display:none; align-items:center; justify-content:center; z-index:3; }
.upload-overlay.on { display:flex; }
.upload-overlay .up-pct { font-size:0.92rem; font-weight:900; color:#fff; z-index:2; }
.upload-ring {
  position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(var(--p) calc(var(--pct,0) * 1%), rgba(255,255,255,0.3) 0);
  -webkit-mask:radial-gradient(farthest-side, #0000 calc(100% - 5px), #000 calc(100% - 5px));
  mask:radial-gradient(farthest-side, #0000 calc(100% - 5px), #000 calc(100% - 5px));
}

.stat-card {
  background:white; border-radius:var(--r-lg); padding:16px 18px;
  box-shadow:var(--sh-sm); border:1px solid var(--border);
  display:flex; flex-direction:column; gap:9px; transition:var(--t);
}
.stat-card:hover { transform:translateY(-2px); box-shadow:var(--sh-md); }
.stat-icon { width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; }
.stat-icon svg, .stat-icon i { width:17px; height:17px; }
.stat-icon.g { background:var(--p-light); color:var(--p); }
.stat-icon.b { background:#dbeafe; color:#2563eb; }
.stat-icon.a { background:#fef3c7; color:#d97706; }
.stat-icon.r { background:#ffe4e6; color:#e11d48; }
.stat-val { font-size:1.5rem; font-weight:900; line-height:1; }
.stat-lbl { font-size:0.71rem; font-weight:800; color:var(--muted); }

.renew-presets { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.r-preset {
  padding:10px 4px; border-radius:11px; border:1.5px solid var(--border);
  background:white; cursor:pointer; font-weight:900; font-size:0.78rem;
  color:var(--muted); transition:var(--t); font-family:'Vazirmatn',sans-serif;
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.r-preset small { font-size:0.62rem; font-weight:700; }
.r-preset:hover, .r-preset.on { border-color:var(--p); background:var(--p-light); color:var(--p); }
.r-preset.on small { color:var(--p); }

.modal-ov {
  position:fixed; inset:0; background:rgba(15,23,42,0.32);
  backdrop-filter:blur(4px); z-index:8000;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity 0.2s;
}
.modal-ov.open { opacity:1; pointer-events:all; }
.modal-box {
  background:white; border-radius:22px; padding:28px 24px;
  width:92%; max-width:370px; box-shadow:var(--sh-float);
  text-align:center;
  transform:translateY(14px) scale(0.97); opacity:0;
  transition:transform 0.25s, opacity 0.25s;
}
.modal-ov.open .modal-box { transform:translateY(0) scale(1); opacity:1; }
.confirm-icon { width:52px; height:52px; border-radius:15px; background:#fee2e2; color:#dc2626; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; }
.confirm-icon svg, .confirm-icon i { width:24px; height:24px; }
.confirm-msg { font-size:0.9rem; font-weight:800; line-height:1.7; margin-bottom:18px; }

.reg-layout { display:grid; grid-template-columns:1fr; gap:18px; }
.reg-photo { display:flex; flex-direction:column; align-items:center; justify-content:center; padding-bottom:18px; border-bottom:1px solid #f1f5f9; }
@media (min-width:1024px) {
  .reg-layout { grid-template-columns:250px 1fr; gap:28px; align-items:center; }
  .reg-photo { border-bottom:none; border-left:1px solid #f1f5f9; padding-bottom:0; padding-left:28px; }
}

.set-section { background:white; border-radius:var(--r-lg); border:1px solid var(--border); box-shadow:var(--sh-sm); overflow:hidden; margin-bottom:16px; }
.set-header { padding:14px 18px; border-bottom:1px solid #f1f5f9; display:flex; align-items:center; gap:12px; }
.set-hicon { width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.set-hicon svg, .set-hicon i { width:16px; height:16px; }
.set-body { padding:18px; }

#float-menu {
  position:fixed; z-index:9000; background:white;
  border-radius:14px; box-shadow:var(--sh-float); border:1px solid var(--border);
  overflow:hidden; min-width:155px; display:none; flex-direction:column;
}
#float-menu.open { display:flex; animation:popIn 0.14s ease; }
.fm-item {
  padding:11px 15px; font-size:0.8rem; font-weight:800;
  cursor:pointer; display:flex; align-items:center; gap:9px;
  border:none; background:none; color:var(--text);
  text-decoration:none; transition:background 0.1s; width:100%;
  font-family:'Vazirmatn',sans-serif; text-align:right;
}
.fm-item:hover { background:var(--p-light); color:var(--p); }
.fm-item svg, .fm-item i { width:14px; height:14px; }

.info-row { display:flex; align-items:center; justify-content:space-between; padding:9px 12px; border-radius:9px; background:#f8fafc; font-size:0.8rem; }
.info-row label { color:var(--muted); font-weight:700; }
.info-row span { font-weight:800; }

.mob-nav {
  display:none; position:fixed; bottom:16px; left:50%;
  transform:translateX(-50%); background:rgba(255,255,255,0.97);
  backdrop-filter:blur(16px); padding:8px 14px;
  border-radius:30px; box-shadow:0 10px 34px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04);
  z-index:2000; gap:10px; width:calc(100% - 28px); max-width:430px;
  justify-content:space-around;
}
.mob-link {
  flex:1; height:46px; border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); text-decoration:none; transition:var(--t);
}
.mob-link svg, .mob-link i { width:21px; height:21px; transition:var(--t); }
.mob-link:active { transform:scale(0.92); }
.mob-link.on { background:linear-gradient(135deg, var(--p), var(--p-dark)); color:white; box-shadow:0 5px 14px var(--p-glow); }
.mob-link.on svg, .mob-link.on i { transform:scale(1.05); }

.toast-root { position:fixed; top:20px; left:50%; transform:translateX(-50%); z-index:9999; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; }
.toast-item {
  display:flex; align-items:center; gap:10px;
  padding:11px 18px; border-radius:14px; pointer-events:all;
  box-shadow:0 8px 28px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
  font-weight:800; font-size:0.82rem; min-width:240px; max-width:340px;
  animation:toastIn 0.3s cubic-bezier(0.175,0.885,0.32,1.275) forwards;
  white-space:nowrap;
}
.toast-item.success { background:#f0fdf4; border:1px solid #bbf7d0; color:#15803d; }
.toast-item.error { background:#fff1f1; border:1px solid #fecaca; color:#dc2626; }
.toast-item .t-icon { width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.toast-item.success .t-icon { background:#dcfce7; color:#16a34a; }
.toast-item.error .t-icon { background:#fee2e2; color:#dc2626; }
.toast-item .t-icon svg, .toast-item .t-icon i { width:16px; height:16px; }
.toast-out { animation:toastOut 0.25s forwards; }

@keyframes spin { to { transform:rotate(360deg); } }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
@keyframes toastIn { from{opacity:0;transform:translateY(-10px) scale(0.94)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes toastOut { to{opacity:0;transform:translateY(-8px) scale(0.96)} }
@keyframes popIn { from{opacity:0;transform:scale(0.9) translateY(-4px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes fadeSlide { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

.shake { animation:shake 0.3s ease; }

.skeleton {
  position:relative; overflow:hidden;
  background:#eaeff5; border-radius:8px;
  color:transparent !important;
}
.skeleton * { visibility:hidden; }
.skeleton::after {
  content:''; position:absolute; inset:0;
  transform:translateX(100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.65), transparent);
  animation:shimmer 1.25s infinite;
}

@keyframes shimmer { 100% { transform:translateX(-100%); } }
.sk-line { display:block; height:13px; border-radius:6px; }
.sk-row { height:42px; border-radius:9px; }

.sk-on .card, .sk-on .set-section { position:relative; overflow:hidden; }
.sk-on .card > *, .sk-on .set-section > * { visibility:hidden; }
.sk-on .card::after, .sk-on .set-section::after { content:''; position:absolute; inset:0; background:#eaeff5; border-radius:inherit; }
.sk-on .card::before, .sk-on .set-section::before {
  content:''; position:absolute; inset:0; z-index:1; transform:translateX(100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.65), transparent);
  animation:shimmer 1.25s infinite;
}

.page-loader { position:fixed; inset:0; background:rgba(255,255,255,0.8); backdrop-filter:blur(4px); z-index:9999; display:flex; align-items:center; justify-content:center; }
.spinner-ring { width:26px; height:26px; border:3px solid var(--p-light); border-top-color:var(--p); border-radius:50%; animation:spin 0.7s linear infinite; }
.btn-spinner { width:12px; height:12px; border:2px solid rgba(255,255,255,0.4); border-top-color:#fff; border-radius:50%; animation:spin 0.6s linear infinite; display:inline-block; margin-left:5px; }
.empty-state { color:var(--muted); font-size:0.76rem; text-align:center; padding:12px 8px; }

.seg-cards { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.seg-card { border:1.5px solid var(--border); border-radius:13px; padding:12px 8px; background:white; cursor:pointer; text-align:center; transition:var(--t); font-family:'Vazirmatn',sans-serif; }
.seg-card:hover { border-color:var(--p); }
.seg-card.on { border-color:var(--p); background:var(--p-light); box-shadow:0 4px 12px var(--p-glow); }
.seg-card .sc-icon { width:34px; height:34px; border-radius:10px; background:#f1f5f9; color:var(--muted); display:flex; align-items:center; justify-content:center; margin:0 auto 7px; transition:var(--t); }
.seg-card .sc-icon svg, .seg-card .sc-icon i { width:16px; height:16px; }
.seg-card.on .sc-icon { background:var(--p); color:white; }
.seg-card .sc-title { font-size:0.74rem; font-weight:800; }
.seg-card .sc-count { font-size:0.68rem; color:var(--muted); font-weight:700; margin-top:2px; }
.seg-card.on .sc-count { color:var(--p); }
.chips { display:flex; flex-wrap:wrap; gap:6px; max-height:120px; overflow-y:auto; }
.chip { display:inline-flex; align-items:center; gap:5px; background:#f1f5f9; color:var(--text); font-size:0.72rem; font-weight:700; padding:4px 10px; border-radius:20px; }
.chip .c-dot { width:6px; height:6px; border-radius:50%; background:var(--p); flex-shrink:0; }

.hist-stat { background:var(--p-light); border-radius:12px; padding:11px 8px; text-align:center; }
.hist-stat .hs-val { font-size:1.25rem; font-weight:900; color:var(--p); line-height:1; }
.hist-stat .hs-lbl { font-size:0.66rem; font-weight:800; color:var(--muted); margin-top:5px; }
.hist-list { display:grid; gap:8px; max-height:340px; overflow-y:auto; padding-left:2px; }
.hist-item { display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:12px; background:#f8fafc; border:1px solid var(--border); transition:var(--t); }
.hist-item:hover { border-color:var(--p); background:var(--p-light); }
.hist-icon { width:36px; height:36px; border-radius:10px; background:#e5f3c0; color:var(--p); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.hist-icon svg, .hist-icon i { width:16px; height:16px; }
.hist-main { flex:1; min-width:0; }
.hist-days { font-weight:800; font-size:0.82rem; }
.hist-date { font-size:0.7rem; color:var(--muted); font-weight:700; margin-top:2px; }
.hist-fee { font-weight:900; font-size:0.8rem; color:var(--p); white-space:nowrap; }

@media (max-width:1024px) {
  body { overflow:auto; }
  .app-container { height:auto; min-height:100vh; }
  .sidebar { display:none; }
  .main-content { padding:16px 14px 130px !important; height:auto; overflow:visible; }
  .mob-nav { display:flex; }

  .header-section { flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:18px; }
  .header-info { flex:1; min-width:0; }
  .header-actions { flex-shrink:0; }

  .header-search { width:100% !important; flex-basis:100%; order:5; }

  .form-input, input, textarea, select { font-size:16px !important; }

  .u-tbl-wrap { display:none !important; }
  .u-cards { display:grid; gap:10px; }

  .action-btns { display:none !important; }
  .action-mob-btn { display:inline-flex !important; }

  .user-detail-grid { grid-template-columns:1fr !important; }
  .stats-grid { grid-template-columns:repeat(2,1fr) !important; }
  .dash-mid { grid-template-columns:1fr !important; }
  .dash-bot { grid-template-columns:1fr !important; }
  .settings-grid { grid-template-columns:1fr !important; }
  .set-body > div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns:1fr !important; }
}

@media (max-width:640px) {
  .stats-grid { grid-template-columns:repeat(2,1fr) !important; }
  .header-section h1 { font-size:1.2rem; }
  .renew-presets { grid-template-columns:repeat(2,1fr); }
  .reg-grid { grid-template-columns:1fr !important; }
  .seg-cards { grid-template-columns:repeat(2,1fr) !important; }
  .notify-grid { grid-template-columns:1fr !important; }
}

@media (max-width:400px) {
  .stats-grid { grid-template-columns:1fr 1fr !important; }
}

@media (min-width:1200px) {
  .settings-grid { grid-template-columns:repeat(3,1fr) !important; }
}