:root{--bg-color: #0f172a;--panel-bg: rgba(30, 41, 59, .7);--panel-border: rgba(255, 255, 255, .1);--primary-color: #3b82f6;--primary-hover: #2563eb;--text-main: #f8fafc;--text-muted: #94a3b8;--success: #10b981;--danger: #ef4444}*{box-sizing:border-box;margin:0;padding:0;font-family:Tajawal,sans-serif}body{background-color:var(--bg-color);color:var(--text-main);min-height:100vh;display:flex;justify-content:center;align-items:center;background-image:radial-gradient(at 0% 0%,rgba(59,130,246,.15) 0px,transparent 50%),radial-gradient(at 100% 100%,rgba(16,185,129,.1) 0px,transparent 50%);background-attachment:fixed}.app-container{width:100%;max-width:900px;padding:2rem;display:flex;flex-direction:column;gap:2rem}header{text-align:center}header h1{font-size:2.5rem;font-weight:800;margin-bottom:.5rem;background:linear-gradient(to left,#60a5fa,#34d399);-webkit-background-clip:text;-webkit-text-fill-color:transparent}header p{color:var(--text-muted);font-size:1.1rem}.glass-panel{background:var(--panel-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--panel-border);border-radius:24px;padding:3rem;box-shadow:0 25px 50px -12px #00000080}.upload-section{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-bottom:2.5rem}@media (max-width: 768px){.upload-section{grid-template-columns:1fr}}.upload-card{background:#0f172a99;border:2px dashed rgba(148,163,184,.3);border-radius:16px;padding:2rem;text-align:center;transition:all .3s ease;display:flex;flex-direction:column;align-items:center;gap:1rem}.upload-card:hover{border-color:var(--primary-color);transform:translateY(-5px);box-shadow:0 10px 25px -5px #3b82f633}.upload-card.has-file{border-color:var(--success);border-style:solid}.icon{font-size:3rem}.upload-card h2{font-size:1.25rem;font-weight:700}.upload-card p{color:var(--text-muted);font-size:.9rem}.file-name{font-size:.85rem;color:var(--primary-color);word-break:break-all;min-height:20px}.btn{border:none;border-radius:8px;padding:.75rem 1.5rem;font-size:1rem;font-weight:700;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;justify-content:center;gap:.5rem}.primary-btn{background-color:var(--panel-border);color:var(--text-main)}.primary-btn:hover{background-color:#fff3}.action-section{text-align:center}.action-btn{background:linear-gradient(135deg,var(--primary-color),#6366f1);color:#fff;width:100%;max-width:400px;padding:1rem 2rem;font-size:1.2rem;border-radius:12px;box-shadow:0 10px 15px -3px #3b82f666}.action-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 15px 20px -3px #3b82f680}.action-btn:disabled{background:#334155;color:#94a3b8;cursor:not-allowed;box-shadow:none;transform:none}.status-area{margin-top:2rem;text-align:center;background:#0003;padding:1.5rem;border-radius:12px}.progress-bar-container{width:100%;height:8px;background:#ffffff1a;border-radius:4px;overflow:hidden;margin-bottom:1rem}.progress-bar{height:100%;width:0%;background:linear-gradient(90deg,#34d399,#10b981);transition:width .3s ease}.hidden{display:none!important}.spinner{width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin 1s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}footer{text-align:center;color:var(--text-muted);font-size:.9rem}