:root {
    --main-color: #00f2fe;
    --bg-dark: #080808;
    --card-bg: rgba(255, 255, 255, 0.03);
    --text-gray: #b0b0b0;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

body { background-color: var(--bg-dark); color: #fff; direction: rtl; overflow-x: hidden; }

/* Dashboard Layout */
.dashboard { display: flex; min-height: 100vh; }

/* Sidebar */
.sidebar { width: 260px; background: #000; border-left: 1px solid #1a1a1a; padding: 20px; position: fixed; height: 100vh; z-index: 1000; }
.sidebar-header h2 { color: var(--main-color); font-size: 1.4rem; text-align: center; margin-bottom: 5px; }
.sidebar-menu a { display: flex; align-items: center; color: var(--text-gray); text-decoration: none; padding: 10px; border-radius: 8px; font-size: 0.85rem; transition: 0.3s; margin-bottom: 5px; }
.sidebar-menu a:hover { background: var(--card-bg); color: var(--main-color); }

/* Main Content */
.content { flex: 1; margin-right: 260px; padding: 40px; position: relative; min-height: 100vh; display: flex; flex-direction: column; }

/* Cards & Inputs */
.card { background: var(--card-bg); border: 1px solid #1a1a1a; padding: 25px; border-radius: 15px; margin-bottom: 30px; }
input, textarea, select { width: 100%; padding: 12px; background: #111; border: 1px solid #222; border-radius: 10px; color: #fff; margin-bottom: 15px; font-size: 0.95rem; }
.btn-primary { background: var(--main-color); color: #000; border: none; padding: 12px 25px; border-radius: 10px; font-weight: bold; cursor: pointer; width: 100%; transition: 0.3s; }
.btn-primary:hover { transform: scale(1.02); box-shadow: 0 0 15px rgba(0, 242, 254, 0.4); }

/* Result Cards (The magic part) */
.res-card { 
    background: #111 !important; 
    border: 1px solid #222 !important; 
    border-right: 5px solid var(--main-color) !important; 
    border-radius: 12px !important; 
    padding: 25px !important; 
    margin: 20px 0 !important; 
    position: relative; 
    animation: fadeIn 0.5s ease;
}

.copy-btn { 
    position: absolute; top: 15px; left: 15px; background: var(--main-color); 
    color: #000; border: none; padding: 6px 12px; border-radius: 6px; 
    font-size: 0.7rem; font-weight: bold; cursor: pointer; transition: 0.3s; 
}
.copy-btn.copied { background: #28a745; color: #fff; }

/* Footer fix */
footer { margin-top: auto; padding-top: 40px; border-top: 1px solid #1a1a1a; text-align: center; color: #444; font-size: 0.8rem; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }