body { font-family: 'Cairo', Tahoma, Arial, sans-serif; }
.app-alerts { padding-top: 18px; }
.alert { padding: 14px 16px; border-radius: 14px; margin: 12px 0; border: 1px solid rgba(0,0,0,.08); background: #eef7ff; color: #123; }
.alert-success { background: #e8f8ef; color: #116433; }
.alert-danger { background: #fdecec; color: #8a1f1f; }
.alert-warning { background: #fff6df; color: #75510a; }
.alert-info { background: #e9f5ff; color: #075d9a; }
.page-wrap { padding: 45px 0 80px; }
.page-card, .dashboard-card, .table-card { background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 16px 44px rgba(6,27,51,.08); padding: 24px; margin-bottom: 20px; }
.page-title { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.page-title h1 { margin:0; color:var(--blue-900); font-size: clamp(1.6rem, 3vw, 2.4rem); }
.page-title p { margin: 8px 0 0; color: var(--muted); }
.form-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:16px; }
.form-grid .full { grid-column: 1 / -1; }
.form-row label { display:block; font-weight:700; color:var(--blue-900); margin-bottom:7px; }
.form-row input, .form-row textarea, .form-row select { width:100%; border:1px solid var(--line); border-radius:14px; padding:12px 14px; background:#fff; color:var(--text); outline:none; }
.form-row input:focus, .form-row textarea:focus, .form-row select:focus { border-color: var(--blue-500); box-shadow: 0 0 0 4px rgba(10,165,223,.12); }
.form-help { color: var(--muted); font-size:.9rem; margin-top:4px; }
.actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:16px; }
.stats-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:16px; margin-bottom:22px; }
.stat { background:#fff; border:1px solid var(--line); border-radius:20px; padding:20px; box-shadow:0 12px 28px rgba(6,27,51,.06); }
.stat span { color:var(--muted); font-weight:700; }
.stat strong { display:block; margin-top:8px; color:var(--blue-900); font-size:2rem; }
.table-responsive { overflow-x:auto; }
table { width:100%; border-collapse:collapse; min-width: 720px; }
th, td { padding:13px 12px; border-bottom:1px solid var(--line); text-align:right; vertical-align:top; }
th { color:var(--blue-900); background:#f5fbff; font-weight:800; }
.badge { display:inline-flex; align-items:center; border-radius:999px; padding:5px 10px; font-weight:800; font-size:.85rem; background:#edf6ff; color:var(--blue-900); white-space:nowrap; }
.badge.green { background:#e8f8ef; color:#116433; }
.badge.gold { background:#fff2cc; color:#855b00; }
.badge.red { background:#fdecec; color:#8a1f1f; }
.badge.gray { background:#f2f4f7; color:#475467; }
.mini-nav { display:flex; gap:10px; flex-wrap:wrap; margin:12px 0 24px; }
.mini-nav a { padding:10px 14px; border-radius:999px; background:#fff; border:1px solid var(--line); color:var(--blue-900); font-weight:800; }
.mini-nav a:hover { background:var(--blue-900); color:#fff; }
.details-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:16px; }
.detail-box { background:#f8fbfd; border:1px solid var(--line); border-radius:16px; padding:15px; }
.detail-box dt { color:var(--muted); font-weight:700; }
.detail-box dd { margin:6px 0 0; color:var(--text); font-weight:700; }
.log-list { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.log-list li { border:1px solid var(--line); border-radius:14px; padding:12px; background:#fff; }
.small-muted { color:var(--muted); font-size:.9rem; }
.filters { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:12px; align-items:end; margin-bottom:18px; }
.success-box { background:#e8f8ef; border:1px solid rgba(17,100,51,.18); border-radius:22px; padding:24px; }
hr.soft { border:0; border-top:1px solid var(--line); margin:20px 0; }
@media (max-width: 900px) { .stats-grid, .details-grid, .filters { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .form-grid, .stats-grid, .details-grid, .filters { grid-template-columns: 1fr; } .page-card, .dashboard-card, .table-card { padding:18px; } .section { padding:55px 0; } }