/* ============================================================ BTX TWEAK Obfuscator — Design System v2 هوية جديدة: أحمر ملكي (Signal Red) + أبيض لامع (Porcelain) خطوط: Cairo (عربي) / Sora (لاتيني للعناوين) / Inter (لاتيني للنص) / JetBrains Mono (كود) وضعان: فاتح (افتراضي) وداكن — يتم التبديل عبر [data-theme="dark"] على طوّره: Zorix — BTX TWEAK Team ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&family=Sora:wght@500;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root{ /* ---------- أحمر العلامة ---------- */ --red-950:#3a0009; --red-900:#57000f; --red-800:#7c0016; --red-700:#a4001d; --red-600:#c90024; --red:#e8032f; --red-bright:#ff3b57; --red-soft:#ffe3e7; /* ---------- سطح فاتح (افتراضي) ---------- */ --paper:#ffffff; --paper-soft:#fff6f7; --paper-raised:#ffffff; --line:#ffd7dd; --line-strong:#ffb4bf; --ink:#230307; --ink-soft:#7a4c51; --ink-faint:#b98b90; --shine: rgba(255,255,255,0.75); --shadow-color: 353 90% 45%; --shadow-glow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 10px 30px rgba(200,0,30,0.14), 0 0 0 1px var(--line); --success:#1a9a5b; --danger:#d1002b; --font-display:'Cairo', 'Sora', sans-serif; --font-body:'Cairo', 'Inter', sans-serif; --font-mono:'JetBrains Mono', monospace; --radius-sm:8px; --radius-md:12px; --radius-lg:20px; } html[lang="en"]{ --font-display:'Sora', sans-serif; --font-body:'Inter', sans-serif; } /* ---------- الوضع الداكن ---------- */ html[data-theme="dark"]{ --paper:#180207; --paper-soft:#20040a; --paper-raised:#26050c; --line:#4a0715; --line-strong:#6e0a1e; --ink:#fdeef0; --ink-soft:#d59aa2; --ink-faint:#7c4550; --shine: rgba(255,255,255,0.10); --shadow-glow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 10px 34px rgba(0,0,0,0.55), 0 0 0 1px var(--line), 0 0 26px rgba(232,3,47,0.14); --red-soft:#3a0713; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--paper); background-image: radial-gradient(ellipse 900px 520px at 12% -10%, rgba(232,3,47,0.10), transparent 60%), radial-gradient(ellipse 760px 520px at 105% 0%, rgba(232,3,47,0.08), transparent 55%), radial-gradient(ellipse 700px 420px at 50% 100%, rgba(232,3,47,0.05), transparent 60%); background-attachment:fixed; color:var(--ink); font-family:var(--font-body); line-height:1.65; min-height:100vh; position:relative; overflow-x:hidden; transition:background-color .25s ease, color .25s ease; } @keyframes btx-pulse-glow{0%,100%{opacity:.55;}50%{opacity:1;}} @keyframes btx-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}} @keyframes btx-shine{0%{background-position:-220% 0;}100%{background-position:220% 0;}} @keyframes btx-fade-up{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}} a{color:inherit;text-decoration:none;} ul{list-style:none;margin:0;padding:0;} button{font-family:inherit;cursor:pointer;} input,select,textarea{font-family:inherit;} ::selection{background:rgba(232,3,47,0.22);} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:2px solid var(--red); outline-offset:2px; } @media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important;transition-duration:.001ms !important;} } .container{max-width:1200px;margin:0 auto;padding:0 24px;} h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; letter-spacing:-0.01em; margin:0 0 12px; color:var(--ink); } .mono{font-family:var(--font-mono);} .text-muted{color:var(--ink-soft);} .text-red{color:var(--red);} /* ============ شريط التنقل ============ */ .navbar{ position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 24px; background:color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); } .navbar .brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;font-size:18px;color:var(--ink);} .navbar .brand img{height:34px;width:auto;display:block;border-radius:8px;} .navbar .brand .mark{ width:34px;height:34px;border-radius:8px; background:linear-gradient(135deg, var(--red-bright), var(--red-700)); display:flex;align-items:center;justify-content:center; color:#fff;font-weight:800;font-size:13px;flex-shrink:0; } .navbar .nav-links{display:flex;align-items:center;gap:26px;} .navbar .nav-links a{font-size:14px;color:var(--ink-soft);transition:color .15s;} .navbar .nav-links a:hover{color:var(--red);} .navbar .nav-actions{display:flex;gap:10px;align-items:center;} .icon-toggle{ width:38px;height:38px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:var(--paper-soft); border:1px solid var(--line); font-size:15px; color:var(--ink); transition:transform .15s, border-color .15s, background .15s; } .icon-toggle:hover{border-color:var(--red-bright); transform:translateY(-1px);} .lang-toggle{font-family:var(--font-mono); font-weight:700; font-size:12px; width:auto; padding:0 12px;} /* ============ الأزرار ============ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:12px 24px;border-radius:var(--radius-sm); font-size:14px;font-weight:700;border:1px solid transparent; transition:transform .12s ease, filter .12s ease, background .15s, box-shadow .2s; white-space:nowrap; } .btn:active{transform:scale(0.97);} .btn-primary{ background:linear-gradient(135deg, var(--red-bright), var(--red) 55%, var(--red-700)); color:#fff; position:relative; overflow:hidden; box-shadow:0 10px 26px rgba(232,3,47,0.35), 0 1px 0 rgba(255,255,255,0.4) inset; } .btn-primary::after{ content:'';position:absolute;inset:0; background:linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.65) 50%, transparent 60%); background-size:250% 100%; animation:btx-shine 3.2s ease-in-out infinite; } .btn-primary:hover{filter:brightness(1.07); box-shadow:0 14px 34px rgba(232,3,47,0.48), 0 1px 0 rgba(255,255,255,0.5) inset;} .btn-secondary{background:var(--paper-raised); border-color:var(--line-strong); color:var(--ink);} .btn-secondary:hover{background:var(--paper-soft); border-color:var(--red);} .btn-ghost{background:transparent;color:var(--ink-soft);} .btn-ghost:hover{color:var(--red);} .btn-danger{background:rgba(209,0,43,0.10);color:var(--danger);border-color:rgba(209,0,43,0.32);} .btn-danger:hover{background:rgba(209,0,43,0.18);} .btn-block{width:100%;} .btn-sm{padding:8px 14px;font-size:13px;} /* ============ البطاقات (لمعان زجاجي) ============ */ .card{ background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px; position:relative; overflow:hidden; box-shadow:var(--shadow-glow); transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease; } .card::before{ content:''; position:absolute; inset:0 0 auto 0; height:60%; background:linear-gradient(180deg, var(--shine), transparent); opacity:.5; pointer-events:none; } .card:hover{border-color:var(--red-bright); transform:translateY(-2px);} .card-flat{ background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-md); padding:18px; box-shadow:0 1px 0 rgba(255,255,255,0.5) inset; } /* ============ الحقول ============ */ .field{margin-bottom:18px;} .field label{display:block;font-size:13px;color:var(--ink-soft);margin-bottom:6px;font-weight:600;} .field input,.field select,.field textarea{ width:100%;padding:12px 14px;background:var(--paper); border:1px solid var(--line-strong);border-radius:var(--radius-sm); color:var(--ink);font-size:14px;transition:border-color .15s, box-shadow .15s; } .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red);outline:none;box-shadow:0 0 0 3px rgba(232,3,47,0.12);} .field .hint{font-size:12px;color:var(--ink-faint);margin-top:6px;} .field .error-msg{font-size:12px;color:var(--danger);margin-top:6px;} /* ============ الشارات ============ */ .badge{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:100px;font-size:12px;font-weight:700;} .badge-success{background:rgba(26,154,91,0.12);color:var(--success);} .badge-danger{background:rgba(209,0,43,0.12);color:var(--danger);} .badge-gold{background:rgba(232,3,47,0.10);color:var(--red);} .badge-muted{background:var(--paper-soft);color:var(--ink-soft); border:1px solid var(--line);} /* ============ التنبيهات ============ */ .alert{padding:13px 16px;border-radius:var(--radius-sm);font-size:14px;margin-bottom:16px;border:1px solid transparent;} .alert-error{background:rgba(209,0,43,0.08);border-color:rgba(209,0,43,0.28);color:var(--danger);} .alert-success{background:rgba(26,154,91,0.08);border-color:rgba(26,154,91,0.28);color:var(--success);} /* ============ الفوتر ============ */ .footer{border-top:1px solid var(--line);padding:40px 24px;margin-top:80px;color:var(--ink-soft);font-size:13px;} /* ============ تخطيط لوحة التحكم ============ */ .dash-layout{display:grid;grid-template-columns:240px 1fr;min-height:calc(100vh - 65px);} .dash-sidebar{border-left:1px solid var(--line);padding:24px 14px;background:var(--paper-soft);} [dir="ltr"] .dash-sidebar{border-left:none; border-right:1px solid var(--line);} .dash-sidebar .side-link{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--radius-sm);color:var(--ink-soft);font-size:14px;margin-bottom:4px;transition:background .15s,color .15s;} .dash-sidebar .side-link:hover{background:var(--paper-raised);color:var(--ink);} .dash-sidebar .side-link.active{background:var(--red-soft);color:var(--red);font-weight:700;} .dash-content{padding:32px;} .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:28px;} .stat-card .stat-label{font-size:13px;color:var(--ink-soft);margin-bottom:8px;} .stat-card .stat-value{font-family:var(--font-display);font-size:30px;font-weight:800;color:var(--red);} table{width:100%;border-collapse:collapse;font-size:14px;} table th{text-align:right;padding:10px 12px;color:var(--ink-soft);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid var(--line);} [dir="ltr"] table th{text-align:left;} table td{padding:12px;border-bottom:1px solid var(--line);} table tr:hover td{background:var(--paper-soft);} /* ============ منطقة رفع الملفات ============ */ .dropzone{border:2px dashed var(--line-strong);border-radius:var(--radius-lg);padding:48px 24px;text-align:center;transition:border-color .2s,background .2s;cursor:pointer;} .dropzone.dragover{border-color:var(--red);background:var(--red-soft);} .progress-bar{height:6px;background:var(--paper-soft);border-radius:100px;overflow:hidden;margin-top:10px; border:1px solid var(--line);} .progress-bar .fill{height:100%;background:linear-gradient(90deg, var(--red-bright), var(--red));width:0%;transition:width .2s ease;} /* ============ Utility ============ */ .flex{display:flex;} .flex-between{display:flex;align-items:center;justify-content:space-between;} .flex-center{display:flex;align-items:center;justify-content:center;} .gap-8{gap:8px;} .gap-12{gap:12px;} .gap-16{gap:16px;} .mt-8{margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-32{margin-top:32px;} .mb-8{margin-bottom:8px;} .mb-16{margin-bottom:16px;} .mb-24{margin-bottom:24px;} .hidden{display:none !important;} .w-full{width:100%;} @media (max-width:860px){ .dash-layout{grid-template-columns:1fr;} .dash-sidebar{display:flex;overflow-x:auto;border-left:none;border-right:none;border-bottom:1px solid var(--line);} .navbar .nav-links{display:none;} }