:root{
  --primary:#0ea5e9;
  --primary-600:#0284c7;
  --primary-700:#0369a1;
  --secondary:#16a34a;
  --danger:#ef4444;
  --bg:#f7fafc;
  --surface:#ffffff;
  --text:#0f172a;
  --muted:#6b7280;
  --border:#94a3b8;
  --shadow:0 8px 24px rgba(2,8,20,0.08);
  --table-header-bg:#eef2ff;
  --table-row-alt-bg:#f9fbff;
  --table-hover-bg:#f0f7ff;
  --chip-success-bg:#dcfce7;
  --chip-warning-bg:#fef9c3;
  --chip-danger-bg:#fee2e2;
  --chip-info-bg:#e0f2fe;
  --panel-bg:#ffffff;
  --input-bg:#ffffff;
  --input-border:#94a3b8;
  --input-focus:#0284c7;
  --focus-ring-color:rgba(2,132,199,0.25);
  --frame-border:#7c8aa3;
  --field-bg:#ffffff;
  --label-bg:#e2e8f0;
  --label-text:#0f172a;
  --primary-rgb:14,165,233;
  --secondary-rgb:22,163,74;
  --ambient-opacity:0.08;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Tajawal", "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
  background:
    radial-gradient(900px 900px at 10% 0%, rgba(var(--primary-rgb), var(--ambient-opacity)) 0%, rgba(var(--primary-rgb),0) 60%),
    radial-gradient(1000px 1000px at 95% 100%, rgba(var(--secondary-rgb), var(--ambient-opacity)) 0%, rgba(var(--secondary-rgb),0) 62%),
    var(--bg);
  color:var(--text);
}
.app-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px; background:var(--surface);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow);
}
.brand{display:flex;align-items:center;gap:10px}
.brand .logo{width:40px;height:40px;border-radius:10px;object-fit:cover}
.app-header h1{margin:0;font-size:22px;background:linear-gradient(90deg,var(--primary-700),var(--primary));-webkit-background-clip:text;background-clip:text;color:transparent}
.status{display:flex;gap:8px;align-items:center}
.badge{padding:6px 10px;background:#eef2ff;border:1px solid var(--border);border-radius:999px;color:#334155}
.badge.online{background:var(--secondary-bg);color:#065f46}
.tabs{display:flex;gap:8px;padding:10px;background:var(--surface);position:sticky;top:0;z-index:10;border-bottom:1px solid var(--border)}
.tabs button{background:#ffffff;color:#0f172a;border:3px solid var(--border);padding:12px 18px;border-radius:999px;cursor:pointer;transition:background .2s ease, box-shadow .2s ease, transform .08s ease;display:inline-flex;align-items:center;gap:8px;font-weight:700;letter-spacing:.2px;box-shadow:0 2px 6px rgba(2,8,20,0.06)}
.tabs button:hover{background:#f8fafc;box-shadow:0 4px 10px rgba(2,8,20,0.08);transform:translateY(-1px)}
.tabs button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring-color), 0 4px 10px rgba(2,8,20,0.10)}
.tabs button.active{background:linear-gradient(180deg,var(--primary),var(--primary-600));color:#fff;border-color:var(--primary-600);box-shadow:0 8px 16px rgba(2,8,20,0.12), inset 0 -2px rgba(0,0,0,0.08)}
main{padding:16px;max-width:1200px;margin:0 auto}
.panel-header{display:flex;justify-content:space-between;align-items:center;margin:14px 0}
.filters{display:flex;gap:8px}
.form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;background:var(--panel-bg);padding:14px;border-radius:14px;border:0;box-shadow:var(--shadow)}
.form-grid input,.form-grid select{padding:12px;background:transparent;border:0;color:var(--text);border-radius:10px}
.field{position:relative;background:var(--field-bg);border:3px solid var(--frame-border);border-radius:14px;box-shadow:var(--shadow);padding:8px 10px}
.field-label{position:absolute;top:-12px;right:14px;background:var(--label-bg);color:var(--label-text);border:2px solid var(--frame-border);padding:2px 10px;border-radius:999px;font-size:12px;line-height:1}
.field input,.field select{width:100%;background:transparent;border:0;outline:none;color:var(--text);padding:6px 4px}
.field input::placeholder,.field select::placeholder{color:#94a3b8}
.form-grid input::placeholder{color:#94a3b8}
.form-grid input:focus,.form-grid select:focus{outline:none;border-color:var(--input-focus);box-shadow:0 0 0 3px var(--focus-ring-color)}
.filters input,.filters select{padding:10px;background:var(--input-bg);border:3px solid var(--input-border);border-radius:10px}
.form-actions{grid-column:1/-1;display:flex;gap:8px}
.primary,.secondary,.danger{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-weight:600;border-radius:12px;padding:12px 18px;line-height:1;cursor:pointer;transition:transform .08s ease, filter .2s ease, box-shadow .2s ease}
.primary{background:linear-gradient(180deg,var(--primary),var(--primary-600));color:#fff;border:1px solid rgba(2,132,199,0.2);box-shadow:0 8px 16px rgba(2,8,20,0.08), inset 0 -2px rgba(0,0,0,0.08)}
.secondary{background:#ffffff;color:#0f172a;border:1px solid var(--border);box-shadow:0 2px 6px rgba(2,8,20,0.05)}
.danger{background:linear-gradient(180deg,#f87171,var(--danger));color:#fff;border:1px solid rgba(239,68,68,0.25);box-shadow:0 8px 16px rgba(239,68,68,0.15), inset 0 -2px rgba(0,0,0,0.08)}
.primary:hover,.secondary:hover,.danger:hover{transform:translateY(-1px);filter:brightness(1.02)}
.primary:active,.secondary:active,.danger:active{transform:translateY(0)}
.app-footer{padding:16px;text-align:center;background:var(--surface);border-top:1px solid var(--border)}
.app-footer small{color:var(--primary-700);font-weight:700}
.primary:focus-visible,.secondary:focus-visible,.danger:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring-color), 0 8px 16px rgba(2,8,20,0.08)}
.primary:disabled,.secondary:disabled,.danger:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}
.list-wrapper{margin-top:12px;overflow:auto;background:var(--surface);border-radius:12px;border:3px solid var(--border);box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;background:var(--surface)}
th,td{padding:12px;border-bottom:3px solid var(--border);text-align:right}
th{background:var(--table-header-bg);color:#334155;position:sticky;top:0}
tr:nth-child(even) td{background:var(--table-row-alt-bg)}
tr:hover td{background:var(--table-hover-bg)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.card{background:var(--surface);padding:14px;border-radius:12px;border:1px solid var(--border);box-shadow:var(--shadow);position:relative}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary-700),var(--primary))}
.card h3{margin:0 0 6px 0;color:#0f172a}
.kpi-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:12px 0}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:12px}
.kpi .label{font-size:12px;color:#475569;margin-bottom:6px}
.kpi .value{font-size:20px;font-weight:600}
.kpi.income{background:var(--chip-success-bg)}
.kpi.expense{background:var(--chip-danger-bg)}
.kpi.profit{background:linear-gradient(90deg, var(--secondary-bg), #ffffff)}
.kpi.loss{background:#ffeaea}
.kpi.debt{background:var(--chip-warning-bg)}
.reports-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.report-item{background:var(--surface);padding:12px;border-radius:12px;border:1px solid var(--border);box-shadow:var(--shadow)}
.alerts{background:var(--surface);padding:12px;border-radius:12px;border:1px solid var(--border);box-shadow:var(--shadow)}
.settings-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.app-footer{padding:16px;text-align:center;color:var(--muted)}
.app-footer .wa-link{display:inline-flex;align-items:center;gap:6px;margin-top:8px;color:#0f172a;text-decoration:none}
.app-footer .wa-icon{vertical-align:middle}
.app-footer .wa-text{font-size:13px;color:#0f172a}
.tab-panel{display:none}
.tab-panel.active{display:block}
.tab-panel{position:relative}
.tab-panel::before{content:"";position:absolute;inset:-10px -10px auto -10px;height:220px;background:
  radial-gradient(600px 600px at 20% 40%, rgba(var(--primary-rgb), calc(var(--ambient-opacity)*1.2)) 0%, rgba(255,255,255,0) 65%),
  radial-gradient(700px 700px at 85% 10%, rgba(var(--secondary-rgb), calc(var(--ambient-opacity)*1.1)) 0%, rgba(255,255,255,0) 70%);
pointer-events:none;z-index:0}
.tab-panel > *{position:relative;z-index:1}
.chip{display:inline-block;padding:4px 10px;border-radius:999px;border:3px solid var(--border);font-size:12px}
.chip-success{background:var(--chip-success-bg);color:#14532d}
.chip-warning{background:var(--chip-warning-bg);color:#78350f}
.chip-danger{background:var(--chip-danger-bg);color:#7f1d1d}
.chip-info{background:var(--chip-info-bg);color:#0c4a6e}
@media (max-width:920px){
  .form-grid{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:1fr}
  .kpi-cards{grid-template-columns:1fr 1fr}
  .reports-grid{grid-template-columns:1fr}
  .settings-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .app-header{padding:10px}
  .brand .logo{width:32px;height:32px}
  .app-header h1{font-size:18px}
  .tabs{gap:6px;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .tabs button{padding:8px 12px;font-size:14px}
  main{padding:10px}
  .panel-header{flex-direction:column;align-items:stretch;gap:8px}
  .filters{flex-wrap:wrap}
  .form-grid{grid-template-columns:1fr}
  .field{padding:6px 8px;border-radius:12px}
  .field-label{top:-10px;right:12px;font-size:11px;padding:2px 8px}
  th,td{padding:10px;font-size:14px}
  .primary,.secondary,.danger{padding:10px 14px;border-radius:10px;font-size:14px}
  .list-wrapper{border-width:2px}
}
@media (max-width:480px){
  .app-header h1{font-size:16px}
  .tabs button{padding:6px 10px;font-size:13px}
  th,td{padding:8px;font-size:13px}
  .filters input,.filters select{padding:8px;border-width:2px}
  .app-footer small{font-size:13px}
}