:root{--bg:#14142b;--bg-card:#1e1e3f;--bg-card-2:#26264d;--border:#35355e;--text:#f2f2f7;--text-dim:#a3a3c2;--primary:#7b3fe4;--primary-hover:#6a2fd0;--success:#22c55e;--danger:#f97362;--warning:#f5a623}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);min-height:100vh;margin:0;font-family:Tajawal,Segoe UI,system-ui,sans-serif}a{color:inherit}input,select,textarea,button{font-family:inherit;font-size:1rem}.container{max-width:1100px;margin:0 auto;padding:1.25rem}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:1.25rem;padding:1.25rem}.input{border:1px solid var(--border);background:var(--bg-card-2);width:100%;color:var(--text);text-align:right;border-radius:999px;padding:.85rem 1rem}.input:focus{border-color:var(--primary);outline:none}.btn{cursor:pointer;border:none;border-radius:999px;justify-content:center;align-items:center;gap:.4rem;padding:.85rem 1.25rem;font-weight:700;transition:filter .15s;display:inline-flex}.btn:hover{filter:brightness(1.08)}.btn-primary{background:var(--primary);color:#fff}.btn-success{background:var(--success);color:#06210f}.btn-danger{background:var(--danger);color:#380a04}.btn-block{width:100%}.error-text{color:var(--danger);margin:.5rem 0;font-size:.9rem}.grid{gap:1rem;display:grid}.grid-3{grid-template-columns:repeat(3,1fr)}@media (max-width:700px){.grid-3{grid-template-columns:repeat(2,1fr)}}table{border-collapse:collapse;width:100%}th,td{text-align:right;border-bottom:1px solid var(--border);padding:.75rem}th{color:var(--text-dim);font-weight:600}@media (max-width:640px){html{-webkit-text-size-adjust:100%}.container{max-width:100%;padding:.85rem}.card{border-radius:.9rem;padding:.85rem}h1{font-size:1.35rem}h2{font-size:1.15rem}h3{font-size:1.05rem}h4{font-size:.95rem}input,select,textarea,.input{font-size:16px}.input{border-radius:.75rem;padding:.65rem .85rem}.btn{border-radius:.75rem;padding:.65rem 1rem;font-size:.9rem}.grid-3{grid-template-columns:repeat(2,1fr);gap:.6rem}table{white-space:nowrap;-webkit-overflow-scrolling:touch;display:block;overflow-x:auto}th,td{padding:.5rem;font-size:.85rem}}@media (max-width:400px){.grid-3{grid-template-columns:1fr}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}