:root{--apg-blue:#5878ba;--apg-blue-dark:#3f5fa3;--apg-yellow:#f2be0c;--white:#fff;--text:#15305d;--muted:#6a7b99;--line:#d8e3f4;--bg1:#eff4ff;--bg2:#f7faff;--shadow:0 18px 48px rgba(31,68,145,.14);--radius:24px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Segoe UI",Tahoma,Arial,sans-serif;background:linear-gradient(180deg,var(--bg1),var(--bg2));color:var(--text)}
html[dir="rtl"] body{font-family:"Segoe UI",Tahoma,Arial,sans-serif}
.wrap{max-width:1100px;margin:0 auto;padding:16px 14px 40px}
.hero{background:linear-gradient(135deg, rgba(63,95,163,.98), rgba(88,120,186,.96));border-radius:0 0 24px 24px;padding:14px 16px 18px;color:#fff;box-shadow:0 14px 30px rgba(28,54,110,.18);position:sticky;top:0;z-index:40}
.hero-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:52px;height:52px;object-fit:contain;background:#fff;border-radius:14px;padding:4px}
.brand h1{margin:0;font-size:1.1rem}
.brand p{margin:2px 0 0;color:rgba(255,255,255,.88);font-weight:700}
.actions-top{display:flex;gap:8px;flex-wrap:wrap}
.btn{border:none;border-radius:14px;padding:11px 14px;font-weight:900;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn.primary{background:var(--apg-yellow);color:#1e2f53}
.btn.secondary{background:#fff;color:var(--apg-blue-dark)}
.btn.ghost{background:#eef4ff;color:var(--apg-blue-dark);border:1px solid var(--line)}
.panel{background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);padding:16px;margin-top:16px}
.note{font-size:.88rem;color:var(--muted);font-weight:700}
.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%) translateY(14px);background:#172f5c;color:#fff;padding:12px 18px;border-radius:999px;opacity:0;pointer-events:none;transition:.25s ease;z-index:200;font-weight:900;box-shadow:0 15px 40px rgba(0,0,0,.22)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.modal{position:fixed;inset:0;background:rgba(10,24,53,.52);display:none;align-items:center;justify-content:center;z-index:120;padding:14px;backdrop-filter:blur(8px)}
.modal.show{display:flex}
.modal-card{width:min(100%,760px);max-height:90vh;overflow:auto;background:#fff;border-radius:28px;padding:18px;box-shadow:0 28px 70px rgba(0,0,0,.25);border:1px solid #e2ebf9}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.modal-head h3{margin:0;color:var(--apg-blue-dark)}
.close{border:none;background:#eff4ff;color:var(--apg-blue-dark);font-size:1.1rem;font-weight:900;width:40px;height:40px;border-radius:50%;cursor:pointer}
.field{display:grid;gap:6px;margin-bottom:10px}
.field label{font-weight:800;color:var(--apg-blue-dark)}
.field input, .field select{padding:11px 12px;border-radius:14px;border:1px solid var(--line);font-weight:700;min-width:0}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid #e8eef9;text-align:left;font-size:.93rem}
html[dir="rtl"] .table th,html[dir="rtl"] .table td{text-align:right}
.card-actions{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:640px){.wrap{padding:10px 10px 28px}.btn{width:100%}.card-actions{flex-direction:column}}