:root{--primary:#ffcc00;--primary-dark:#e6b800;--primary-light:#ffd633;--bg-dark:#0f1219;--bg-card:#1a1d2e;--bg-input:#232940;--text:#fff;--text-secondary:#a0aec0;--success:#10b981;--warning:#f59e0b;--error:#ef4444;--border:#2d3748}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{background:linear-gradient(135deg,#0f1219 0%,#1a1d2e 100%);font-family:'Noto Kufi Arabic','Noto Kufi Arabic',sans-serif;color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased}
.container{max-width:1200px;margin:0 auto;padding:30px 15px}
.header{text-align:center;margin-bottom:30px;animation:fadeInDown 0.6s}
.header h1{font-size:clamp(1.8rem,5vw,2.8rem);background:linear-gradient(135deg,var(--primary),var(--primary-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:12px;font-weight:700;line-height:1.2}
.tabs{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:25px;background:rgba(255,255,255,0.03);padding:10px;border-radius:15px}
@media(min-width:768px){.tabs{grid-template-columns:repeat(5,1fr)}}
.tab-btn{padding:12px 14px;background:var(--bg-input);border:2px solid var(--border);border-radius:12px;color:var(--text-secondary);cursor:pointer;transition:all 0.3s;font-weight:600;font-family:inherit;font-size:0.9rem;white-space:nowrap;touch-action:manipulation}
.tab-btn:active{transform:scale(0.97)}
.tab-btn.active{background:var(--primary);color:#191d34;border-color:var(--primary);box-shadow:0 4px 15px rgba(255,204,0,0.3)}
.tab-content{display:none;animation:fadeInUp 0.4s}
.tab-content.active{display:block}
.card{background:var(--bg-card);border-radius:20px;padding:25px 20px;box-shadow:0 10px 40px rgba(0,0,0,0.3);border:1px solid var(--border);margin-bottom:25px}
@media(min-width:768px){.card{padding:30px}}
.section-title{font-size:clamp(1.3rem,3.5vw,1.6rem);color:var(--primary);margin-bottom:20px;font-weight:700;line-height:1.3}
.form-grid{display:grid;gap:18px;margin-bottom:25px;grid-template-columns:1fr}
@media(min-width:640px){.form-grid{grid-template-columns:repeat(2,1fr)}}
label{display:block;margin-bottom:8px;font-weight:600;color:var(--text);font-size:0.9rem}
input,select{width:100%;padding:12px;background:var(--bg-input);border:2px solid var(--border);border-radius:12px;color:var(--text);font-size:1rem;font-family:inherit;transition:all 0.3s;-webkit-appearance:none;appearance:none}
input:focus,select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px rgba(255,204,0,0.1);background:#2a3147}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffcc00' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 12px center;padding-left:36px}
.btn{width:100%;padding:16px;background:var(--primary);color:#191d34;border:none;border-radius:12px;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all 0.3s;font-family:inherit;touch-action:manipulation;box-shadow:0 4px 15px rgba(255,204,0,0.3)}
.btn:active{transform:translateY(1px) scale(0.98)}
.btn:hover{background:var(--primary-light);box-shadow:0 6px 20px rgba(255,204,0,0.4)}
.result-card{background:linear-gradient(135deg,#1e223a,#2c2f4a);border-radius:16px;padding:25px 20px;margin-top:25px;border:2px solid var(--primary);display:none}
.result-card.show{display:block;animation:slideInUp 0.5s}
.result-grid{display:grid;grid-template-columns:1fr;gap:15px}
@media(min-width:640px){.result-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.result-grid{grid-template-columns:repeat(3,1fr)}}
.result-item{background:var(--bg-card);padding:18px 15px;border-radius:12px;text-align:center;border:1px solid var(--border)}
.result-label{font-size:0.85rem;color:var(--text-secondary);margin-bottom:6px;line-height:1.3}
.result-value{font-size:1.5rem;font-weight:700;color:var(--primary);word-break:break-word}
.result-value.success{color:var(--success)}
.result-value.error{color:var(--error)}
.result-value.warning{color:var(--warning)}
.info-box{background:rgba(255,204,0,0.1);border:2px solid rgba(255,204,0,0.3);border-radius:12px;padding:15px;margin-top:20px;font-size:0.95rem;line-height:1.5}
.trust-box{background:rgba(59,130,246,0.1);border:2px solid rgba(59,130,246,0.3);border-radius:12px;padding:15px;margin-top:20px;font-size:0.9rem;line-height:1.6}
.trust-box summary{cursor:pointer;font-weight:700;color:var(--primary);user-select:none;padding:5px 0;display:flex;justify-content:space-between;align-items:center}
.trust-box summary:hover{color:var(--primary-light)}
.trust-box ul{margin:15px 0 5px 0;padding-right:20px}
.trust-box li{margin-bottom:10px;color:var(--text-secondary)}
.instrument-selector{margin-bottom:20px}
.instrument-info{background:rgba(255,204,0,0.1);border:1px solid rgba(255,204,0,0.3);border-radius:10px;padding:12px;margin-top:10px;font-size:0.9rem;color:var(--text-secondary);line-height:1.5}
.instrument-info strong{color:var(--primary)}
.toast{position:fixed;top:20px;left:50%;transform:translateX(-50%) translateY(-100px);background:var(--success);color:white;padding:15px 25px;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.4);opacity:0;transition:all 0.3s;z-index:1000;font-weight:600;max-width:90%;text-align:center}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.toast.error{background:var(--error)}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}