:root{
  --accent: #2f9b57;
  --muted: #666;
  --bg: #fff;
  --shadow: 0 8px 28px rgba(0,0,0,0.08);
  --danger: #c82333;
  --glass: rgba(255,255,255,0.8);
}

/* Base */
*{box-sizing:border-box}
body{ margin:0; font-family: "Tahoma","Arial",sans-serif; background:#f6f7f8; color:#111; direction:rtl; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
.app{ max-width:420px; margin:18px auto; padding:14px; }

/* Header */
.app-header{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
.header-title{ text-align:center; font-weight:700; color:var(--accent); font-size:18px; line-height:1.05; }
.icon-btn{ width:46px; height:46px; border-radius:10px; border:none; background:transparent; cursor:pointer; }

/* Intro */
.intro{ font-size:18px; color:var(--muted); margin:6px 0 12px; text-align:center; }

/* months container */
.months-container{ display:flex; flex-direction:column; gap:14px; }
.month-block{ border-radius:12px; overflow:hidden; background:#fff; box-shadow:var(--shadow); border:1px solid #eee; }
.month-head{ display:flex; justify-content:space-between; align-items:center; padding:12px 14px; cursor:pointer; background:linear-gradient(90deg,#f9fff5, #ffffff); }
.month-label{ font-weight:700; color:var(--accent); }
.month-meta{ color:var(--muted); font-size:13px; }

/* content (hidden by default) */
.month-content{ display:none; padding:12px 14px; border-top:1px solid #f0f0f0; }
.month-content.show{ display:block; }

/* platform grid & cards */
.platform-grid{ display:grid; grid-template-columns:1fr; gap:10px; }
.platform-card{ background:#fbfff9; border-radius:10px; padding:12px; border:1px solid #e8f4ea; }
.platform-card.unreg{ background:#fff7f7; border-color:#f7d7d7; }
.platform-title{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.platform-title h4{ margin:0; color:#166534; }
.platform-stats{ display:flex; flex-direction:column; gap:6px; color:#222; margin-bottom:8px; }
.platform-stats strong{ color:#0b6b9a; }
.platform-actions{ display:flex; gap:8px; justify-content:flex-start; align-items:center; }

/* buttons - improved styling */
.btn{ padding:8px 12px; border-radius:10px; border:none; cursor:pointer; font-weight:700; font-size:14px; transition:all .18s ease; box-shadow:0 6px 18px rgba(0,0,0,0.06); }
.btn:hover{ transform:translateY(-2px); }
.btn.primary{ background:var(--accent); color:#fff; box-shadow:0 10px 26px rgba(47,155,87,0.14); border:1px solid rgba(0,0,0,0.04); }
.btn.primary:active{ transform:translateY(0); }
.btn.ghost{ background:transparent; border:1px solid #e6e6e6; color:#333; }
.btn.ghost:hover{ background:#fff; }
.btn.danger{ background:var(--danger); color:#fff; }

/* clear button style inside used items */
.btn.clear-btn{ padding:6px 10px; border-radius:8px; font-weight:700; background:#f0f8f3; color:#0b6b9a; border:1px solid #cfead8; }
.btn.clear-btn.cleared{ background:#e9ffef; color:#166534; border-color:#c3e6cb; }

/* modal generic */
.modal{ display:none; position:fixed; inset:0; align-items:center; justify-content:center; z-index:60000; padding:20px; }
.modal.show{ display:flex; }
.modal-overlay{ position:absolute; inset:0; background:rgba(0,0,0,0.45); }
.modal-card{ position:relative; z-index:2; background:#fff; border-radius:12px; width:100%; max-width:520px; padding:18px; box-shadow:0 20px 40px rgba(0,0,0,0.25); text-align:right; }

/* error card specific */
.error-card{ border-left:6px solid var(--danger); background:#fff7f7; }
.error-head{ display:flex; gap:12px; align-items:center; }
.error-icon{ font-size:34px; line-height:1; }
.error-body{ margin-top:10px; color:#222; }
.error-details{ background:#fff; border:1px dashed #f0d9d9; padding:8px; border-radius:6px; margin-top:8px; white-space:pre-wrap; font-size:13px; color:#6b1a1a; max-height:220px; overflow:auto; }

/* used list items */
.used-list{ display:flex; flex-direction:column; gap:8px; max-height:420px; overflow:auto; padding-top:8px; }
.used-item{ display:flex; justify-content:space-between; align-items:center; padding:10px; background:#fff; border-radius:8px; border:1px solid #f0f0f0; gap:8px; }
.used-item.cleared{ background:#e9ffef; border-color:#c3e6cb; }

/* small meta */
.muted{ color:var(--muted); font-size:13px; }

/* toast */
.toast{ position:fixed; left:50%; transform:translateX(-50%); bottom:26px; padding:10px 16px; border-radius:10px; box-shadow:0 8px 22px rgba(0,0,0,0.12); background:#fff; color:#333; z-index:70000; }
.toast.hidden{ display:none; }

/* responsive */
@media (max-width:420px){
  .modal-card{ padding:14px; }
  .btn{ padding:8px 10px; font-size:13px; }
}