/* ═══════════════════════════════════════════════════════════════ StackifyX — Global Stylesheet Font: Manrope (primary) | JetBrains Mono (code) Themes: Dark (default) · Light (.light on ) ═══════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap'); /* ── CSS Variables ───────────────────────────────────────────── */ :root { /* Brand */ --blue: #2563eb; --purple: #7c3aed; --grad: linear-gradient(135deg, #2563eb, #7c3aed); --grad-h: linear-gradient(135deg, #1d4ed8, #6d28d9); /* Dark theme (default) */ --bg-primary: #050508; --bg-secondary: #0c0c14; --bg-card: #111118; --bg-elevated: #1a1a26; --border: rgba(255,255,255,0.07); --border-accent:rgba(37,99,235,0.35); --text-primary: #f0f0ff; --text-secondary: #94a3b8; --text-muted: #55557a; --accent-blue: #63b3ed; --accent-purple: #a78bfa; --accent-cyan: #22d3ee; --accent-green: #34d399; --accent-red: #f87171; --accent-orange: #fbbf24; --accent-pink: #f472b6; --gradient-primary: linear-gradient(135deg, #63b3ed, #a78bfa); --gradient-secondary: linear-gradient(135deg, #22d3ee, #63b3ed); --shadow-sm: 0 2px 8px rgba(0,0,0,0.4); --shadow-md: 0 8px 32px rgba(0,0,0,0.5); --shadow-lg: 0 24px 64px rgba(0,0,0,0.6); --shadow-glow:0 0 40px rgba(37,99,235,0.12); --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; --font-body: 'Manrope', sans-serif; --font-mono: 'JetBrains Mono', monospace; --font-display: 'Manrope', sans-serif; --nav-height: 70px; --transition: 0.2s ease; } /* ── Light Mode ──────────────────────────────────────────────── */ html.light { --bg-primary: #f8fafc; --bg-secondary: #f1f5f9; --bg-card: #ffffff; --bg-elevated: #eef2f8; --border: #e2e8f0; --border-accent:rgba(37,99,235,0.3); --text-primary: #101828; --text-secondary: #374151; --text-muted: #667085; --accent-blue: #2563eb; --accent-purple: #7c3aed; --accent-cyan: #0891b2; --accent-green: #059669; --accent-red: #dc2626; --accent-orange: #d97706; --gradient-primary: linear-gradient(135deg, #2563eb, #7c3aed); --gradient-secondary: linear-gradient(135deg, #0891b2, #2563eb); --shadow-sm: 0 2px 8px rgba(0,0,0,0.06); --shadow-md: 0 8px 32px rgba(0,0,0,0.10); --shadow-lg: 0 24px 64px rgba(0,0,0,0.12); --shadow-glow:0 0 40px rgba(37,99,235,0.10); } /* ── Reset ───────────────────────────────────────────────────── */ *,*::before,*::after { margin:0;padding:0;box-sizing:border-box; } html { scroll-behavior:smooth; font-size:16px; } body { font-family: var(--font-body); background: var(--bg-primary); color: var(--text-primary); line-height: 1.6; min-height: 100vh; -webkit-font-smoothing: antialiased; overflow-x: hidden; } body::before { content:''; position:fixed; inset:0; background-image: linear-gradient(rgba(37,99,235,0.025) 1px,transparent 1px), linear-gradient(90deg,rgba(37,99,235,0.025) 1px,transparent 1px); background-size:60px 60px; pointer-events:none; z-index:-1; } html.light body::before { background-image: linear-gradient(rgba(37,99,235,0.04) 1px,transparent 1px), linear-gradient(90deg,rgba(37,99,235,0.04) 1px,transparent 1px); } a { color:var(--accent-blue);text-decoration:none;transition:color var(--transition); } a:hover { color:var(--accent-purple); } img { max-width:100%;display:block; } ::selection { background:rgba(37,99,235,0.2);color:var(--text-primary); } ::-webkit-scrollbar { width:5px; } ::-webkit-scrollbar-track { background:var(--bg-primary); } ::-webkit-scrollbar-thumb { background:var(--bg-elevated);border-radius:3px; } ::-webkit-scrollbar-thumb:hover { background:var(--accent-blue); } /* ── Typography ──────────────────────────────────────────────── */ h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); font-weight:700; line-height:1.2; letter-spacing:-0.02em; color:var(--text-primary); } p { color:var(--text-secondary); } /* ── Smooth colour transitions for theme switch ──────────────── */ html { transition:background-color 0.25s ease; } *,*::before,*::after { transition-property:background-color,border-color,color,box-shadow,fill,stroke; transition-duration:0.25s; transition-timing-function:ease; } .progress-fill,canvas,.modal-overlay,.nav-toggle span, .btn,.btn-primary,.btn-secondary { transition:none!important; } .btn { transition:transform 0.15s ease,box-shadow 0.15s ease,opacity 0.15s ease!important; } /* ── Fade-up animation ───────────────────────────────────────── */ .fade-up { opacity:0; transform:translateY(28px); transition:opacity 0.6s ease,transform 0.6s ease; } .fade-up.visible { opacity:1; transform:translateY(0); } .fade-up-delay-1 { transition-delay:0.1s; } .fade-up-delay-2 { transition-delay:0.2s; } .fade-up-delay-3 { transition-delay:0.3s; } .fade-up-delay-4 { transition-delay:0.4s; } .fade-up-delay-5 { transition-delay:0.5s; } /* ═══════════════════════════════════════════════════════════════ NAVBAR ═══════════════════════════════════════════════════════════════ */ .navbar { position:fixed; top:0;left:0;right:0; height:var(--nav-height); background:rgba(5,5,8,0.88); backdrop-filter:blur(20px); border-bottom:1px solid var(--border); z-index:1000; transition:background 0.3s,border-color 0.3s; } html.light .navbar { background:rgba(248,250,252,0.92); border-bottom-color:var(--border); } .navbar.scrolled { background:rgba(5,5,8,0.97); box-shadow:0 4px 24px rgba(0,0,0,0.3); } html.light .navbar.scrolled { background:rgba(255,255,255,0.98); box-shadow:var(--shadow-sm); } .nav-container { max-width:1280px; margin:0 auto; padding:0 28px; height:100%; display:flex; align-items:center; justify-content:space-between; } /* Brand */ .nav-brand { display:flex; align-items:center; gap:10px; flex-shrink:0; text-decoration:none; color:var(--text-primary); font-family:var(--font-display); font-size:1.2rem; font-weight:800; letter-spacing:-0.03em; } .brand-logo-img { width:34px; height:34px; border-radius:8px; object-fit:contain; background:#fff; padding:2px; flex-shrink:0; transition:transform 0.2s ease!important; } .nav-brand:hover .brand-logo-img { transform:scale(1.07) rotate(-4deg); } .brand-accent { color:var(--accent-blue); } /* Desktop nav links */ .nav-desktop-links { display:flex; align-items:center; gap:2px; } .nav-link { padding:8px 14px; border-radius:var(--radius-sm); font-size:0.9rem; font-weight:500; color:var(--text-secondary); transition:color 0.15s,background 0.15s!important; white-space:nowrap; } .nav-link:hover,.nav-link.active { color:var(--text-primary); background:var(--bg-elevated); } html.light .nav-link:hover { background:#eef2f8; } .nav-sep { width:1px; height:18px; background:var(--border); margin:0 8px; flex-shrink:0; } .nav-btn { padding:9px 20px; background:var(--gradient-primary); border-radius:var(--radius-sm); color:#fff; font-size:0.88rem; font-weight:700; transition:opacity 0.15s,transform 0.15s,box-shadow 0.15s!important; white-space:nowrap; } .nav-btn:hover { opacity:0.88; transform:translateY(-1px); color:#fff; box-shadow:0 8px 20px rgba(37,99,235,0.3); } /* Nav icon buttons */ .nav-icon-btn { width:36px;height:36px; border-radius:var(--radius-sm); border:1px solid var(--border); background:transparent; color:var(--text-muted); text-decoration:none; display:flex;align-items:center;justify-content:center; flex-shrink:0; margin-left:8px; transition:border-color 0.15s,color 0.15s,background 0.15s,transform 0.15s!important; } .nav-icon-btn:hover { border-color:var(--accent-blue); color:var(--text-primary); background:var(--bg-elevated); transform:translateY(-1px); } .linkedin-btn:hover { border-color:#0a66c2; color:#0a66c2; background:rgba(10,102,194,0.08); } /* Theme toggle */ .theme-toggle { width:36px;height:36px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--bg-elevated); cursor:pointer; font-size:1.05rem; display:flex;align-items:center;justify-content:center; flex-shrink:0; user-select:none; margin-left:8px; transition:border-color 0.15s,transform 0.15s!important; } .theme-toggle:hover { border-color:var(--accent-blue); transform:scale(1.08)rotate(12deg); } .t-dark { display:block; } .t-light { display:none; } html.light .t-dark { display:none; } html.light .t-light { display:block; } /* Avatar dropdown */ .nav-user { position:relative; cursor:pointer; margin-left:8px; } .user-avatar { width:36px;height:36px; background:var(--gradient-primary); border-radius:50%; display:flex;align-items:center;justify-content:center; font-weight:800; font-size:0.95rem; color:#fff; } .user-dropdown { display:none; position:absolute; top:calc(100% + 10px); right:0; min-width:210px; z-index:1100; } .user-dropdown::before { content:''; position:absolute; top:-10px; left:0;right:0; height:10px; } .user-dropdown-inner { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); padding:8px; box-shadow:var(--shadow-lg); } .user-dropdown.open { display:block; } .dropdown-header { padding:10px 12px; } .dropdown-header strong { display:block;font-size:0.9rem;color:var(--text-primary); } .user-role-badge { display:inline-block;margin-top:4px;padding:2px 8px;border-radius:100px; font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em; } .user-role-badge.admin { background:rgba(167,139,250,0.15);color:var(--accent-purple); } .user-role-badge.user { background:rgba(37,99,235,0.12);color:var(--accent-blue); } .dropdown-divider { height:1px;background:var(--border);margin:4px 0; } .dropdown-item { display:block;padding:9px 12px;border-radius:var(--radius-sm); color:var(--text-secondary);font-size:0.88rem;transition:background 0.15s,color 0.15s!important; } .dropdown-item:hover { background:var(--bg-elevated);color:var(--text-primary); } .dropdown-item.logout:hover { color:var(--accent-red); } /* Hamburger */ .nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; margin-left:8px; } .nav-toggle span { display:block;width:22px;height:2px; background:var(--text-secondary);border-radius:2px; transition:transform 0.25s,opacity 0.25s!important; } .nav-toggle.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); } .nav-toggle.active span:nth-child(2) { opacity:0;transform:scaleX(0); } .nav-toggle.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); } /* Mobile nav menu */ .nav-links { display:flex; align-items:center; } .mobile-nav-menu { display:none; } /* ═══════════════════════════════════════════════════════════════ PAGE LAYOUT ═══════════════════════════════════════════════════════════════ */ .page-wrapper { padding-top:var(--nav-height); min-height:100vh; } .container { max-width:1200px;margin:0 auto;padding:0 24px; } .container-sm { max-width:640px; } .container-md { max-width:900px; } /* ═══════════════════════════════════════════════════════════════ ALERTS ═══════════════════════════════════════════════════════════════ */ .alert { display:flex;align-items:center;gap:12px; padding:14px 20px;border-radius:var(--radius-md); margin-bottom:24px;font-size:0.9rem;font-weight:500; animation:slideDown 0.3s ease; } @keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}} .alert-success{background:rgba(52,211,153,0.1);border:1px solid rgba(52,211,153,0.3);color:var(--accent-green);} .alert-error {background:rgba(248,113,113,0.1);border:1px solid rgba(248,113,113,0.3);color:var(--accent-red);} .alert-icon { font-size:1rem;flex-shrink:0; } .alert-close{margin-left:auto;background:none;border:none;color:inherit;cursor:pointer;font-size:1.2rem;opacity:0.7;} .alert-close:hover{opacity:1;} /* ═══════════════════════════════════════════════════════════════ CARDS ═══════════════════════════════════════════════════════════════ */ .card { background:var(--bg-card);border:1px solid var(--border); border-radius:var(--radius-lg);padding:28px;transition:var(--transition)!important; } .card:hover{border-color:var(--border-accent);box-shadow:var(--shadow-glow);} .card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--border);} .card-title{font-family:var(--font-display);font-size:1.05rem;font-weight:700;} /* ═══════════════════════════════════════════════════════════════ DASHBOARD STATS ═══════════════════════════════════════════════════════════════ */ .stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:20px;margin-bottom:32px;} .stat-card{ background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg); padding:24px;position:relative;overflow:hidden;transition:var(--transition)!important; } .stat-card::before{ content:'';position:absolute;top:0;right:0; width:110px;height:110px;border-radius:50%;opacity:0.07;transform:translate(30%,-30%); } .stat-card.blue::before{background:var(--accent-blue);} .stat-card.purple::before{background:var(--accent-purple);} .stat-card.green::before{background:var(--accent-green);} .stat-card.orange::before{background:var(--accent-orange);} .stat-card.pink::before{background:var(--accent-pink);} .stat-card.cyan::before{background:var(--accent-cyan);} .stat-card:hover{border-color:var(--border-accent);transform:translateY(-2px);box-shadow:var(--shadow-md);} .stat-icon{font-size:1.9rem;margin-bottom:14px;} .stat-value{font-family:var(--font-display);font-size:1.9rem;font-weight:800;color:var(--text-primary);line-height:1;margin-bottom:4px;} .stat-label{font-size:0.82rem;color:var(--text-muted);font-weight:600;} .stat-trend{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:100px;font-size:0.72rem;font-weight:700;margin-top:8px;} .stat-trend.up {background:rgba(52,211,153,0.12);color:var(--accent-green);} .stat-trend.info{background:rgba(37,99,235,0.1);color:var(--accent-blue);} /* ═══════════════════════════════════════════════════════════════ FORMS ═══════════════════════════════════════════════════════════════ */ .form-group{margin-bottom:20px;} label{display:block;font-size:0.82rem;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:8px;} input[type=text],input[type=email],input[type=password],input[type=number], input[type=date],input[type=url],input[type=tel],select,textarea{ width:100%;padding:12px 16px; background:var(--bg-secondary);border:1px solid var(--border); border-radius:var(--radius-sm);color:var(--text-primary); font-family:var(--font-body);font-size:0.95rem; transition:border-color 0.15s,box-shadow 0.15s!important;outline:none;appearance:none; } input:focus,select:focus,textarea:focus{ border-color:var(--accent-blue);box-shadow:0 0 0 3px rgba(37,99,235,0.1); background:var(--bg-card); } input::placeholder,textarea::placeholder{color:var(--text-muted);} select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23667085' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 14px center;padding-right:40px;cursor:pointer; } textarea{resize:vertical;min-height:100px;} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;} @media(max-width:600px){.form-row{grid-template-columns:1fr;}} .input-group{position:relative;} .eye-btn{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--text-muted);padding:4px;display:flex;align-items:center;transition:color 0.15s!important;} .eye-btn:hover{color:var(--accent-blue);} .input-group input{padding-right:44px;} .error-text{color:var(--accent-red);font-size:0.78rem;margin-top:4px;} /* ═══════════════════════════════════════════════════════════════ BUTTONS ═══════════════════════════════════════════════════════════════ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:12px 24px;border-radius:var(--radius-sm); font-family:var(--font-body);font-size:0.9rem;font-weight:700; cursor:pointer;border:none;text-decoration:none;white-space:nowrap; transition:transform 0.15s,box-shadow 0.15s,opacity 0.15s!important; } .btn-primary{background:var(--gradient-primary);color:#fff;box-shadow:0 4px 16px rgba(37,99,235,0.25);} .btn-primary:hover{opacity:0.88;transform:translateY(-1px);box-shadow:0 8px 24px rgba(37,99,235,0.35);color:#fff;} .btn-secondary{background:var(--bg-elevated);color:var(--text-secondary);border:1px solid var(--border);} .btn-secondary:hover{border-color:var(--accent-blue);color:var(--accent-blue);} .btn-success{background:rgba(52,211,153,0.12);color:var(--accent-green);border:1px solid rgba(52,211,153,0.3);} .btn-success:hover{background:rgba(52,211,153,0.22);} .btn-danger{background:rgba(248,113,113,0.12);color:var(--accent-red);border:1px solid rgba(248,113,113,0.3);} .btn-danger:hover{background:rgba(248,113,113,0.22);} .btn-warning{background:rgba(251,191,36,0.12);color:var(--accent-orange);border:1px solid rgba(251,191,36,0.3);} .btn-warning:hover{background:rgba(251,191,36,0.22);} .btn-sm{padding:7px 14px;font-size:0.8rem;border-radius:6px;} .btn-lg{padding:14px 32px;font-size:0.95rem;} .btn-block{width:100%;} /* ═══════════════════════════════════════════════════════════════ BADGES ═══════════════════════════════════════════════════════════════ */ .badge{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:100px;font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;} .badge::before{content:'';width:6px;height:6px;border-radius:50%;} .badge-pending {background:rgba(251,191,36,0.12);color:var(--accent-orange);} .badge-pending::before{background:var(--accent-orange);} .badge-in-progress{background:rgba(37,99,235,0.12);color:var(--accent-blue);} .badge-in-progress::before{background:var(--accent-blue);animation:pulse 1.5s infinite;} .badge-completed {background:rgba(52,211,153,0.12);color:var(--accent-green);} .badge-completed::before{background:var(--accent-green);} .badge-cancelled {background:rgba(248,113,113,0.12);color:var(--accent-red);} .badge-cancelled::before{background:var(--accent-red);} .badge-accepted{background:rgba(52,211,153,0.12);color:var(--accent-green);} .badge-rejected{background:rgba(248,113,113,0.12);color:var(--accent-red);} .badge-converted{background:rgba(167,139,250,0.12);color:var(--accent-purple);} .badge-review{background:rgba(167,139,250,0.12);color:var(--accent-purple);} @keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}} /* ═══════════════════════════════════════════════════════════════ PROGRESS BAR ═══════════════════════════════════════════════════════════════ */ .progress-bar{width:100%;height:8px;background:var(--bg-elevated);border-radius:100px;overflow:hidden;} .progress-fill{height:100%;background:var(--gradient-primary);border-radius:100px;transition:width 0.8s ease!important;} /* ═══════════════════════════════════════════════════════════════ TABLES ═══════════════════════════════════════════════════════════════ */ .table-wrapper{overflow-x:auto;border-radius:var(--radius-md);} table{width:100%;border-collapse:collapse;font-size:0.88rem;} thead tr{background:var(--bg-elevated);} th{padding:12px 16px;text-align:left;font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-muted);white-space:nowrap;} td{padding:14px 16px;border-bottom:1px solid var(--border);color:var(--text-secondary);vertical-align:middle;} tr:last-child td{border-bottom:none;} tbody tr{transition:background 0.15s!important;} tbody tr:hover{background:rgba(255,255,255,0.02);} /* ═══════════════════════════════════════════════════════════════ PAGINATION ═══════════════════════════════════════════════════════════════ */ .pagination{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:32px;} .page-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);background:var(--bg-card);border:1px solid var(--border);color:var(--text-secondary);font-size:0.88rem;transition:all 0.15s!important;} .page-btn:hover,.page-btn.active{background:var(--gradient-primary);border-color:transparent;color:#fff;} /* ═══════════════════════════════════════════════════════════════ AUTH PAGES ═══════════════════════════════════════════════════════════════ */ .auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:calc(var(--nav-height)+24px) 24px 60px;} .auth-card{width:100%;max-width:460px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:48px;box-shadow:var(--shadow-lg);animation:fadeUp 0.4s ease;} .auth-logo{text-align:center;margin-bottom:36px;} .auth-logo h1{font-size:1.55rem;margin-bottom:8px;} .auth-logo p{font-size:0.88rem;color:var(--text-muted);} .auth-logo-img{width:70px;height:70px;object-fit:contain;border-radius:18px;background:#fff;padding:4px;margin:0 auto 18px;display:block;box-shadow:0 8px 32px rgba(37,99,235,0.22);} .btn-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px 20px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-body);font-size:0.93rem;font-weight:600;cursor:pointer;text-decoration:none;transition:border-color 0.2s,background 0.2s,transform 0.15s!important;} .btn-google:hover{border-color:#4285f4;background:rgba(66,133,244,0.06);transform:translateY(-1px);color:var(--text-primary);} .auth-divider{display:flex;align-items:center;gap:14px;margin:20px 0;color:var(--text-muted);font-size:0.8rem;} .auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border);} /* ═══════════════════════════════════════════════════════════════ DASHBOARD LAYOUT ═══════════════════════════════════════════════════════════════ */ .dashboard-page{padding-top:var(--nav-height);} .dashboard-header{background:var(--bg-secondary);border-bottom:1px solid var(--border);padding:36px 0 0;} .dashboard-header-inner{max-width:1300px;margin:0 auto;padding:0 24px;} .dashboard-header h1{font-size:1.75rem;margin-bottom:4px;} .dashboard-header p{color:var(--text-muted);font-size:0.88rem;} .dash-tabs{display:flex;gap:4px;margin-top:24px;} .dash-tab{padding:10px 20px;border-radius:var(--radius-sm) var(--radius-sm) 0 0;font-size:0.88rem;font-weight:600;color:var(--text-muted);transition:color 0.15s,border-color 0.15s!important;border-bottom:2px solid transparent;cursor:pointer;} .dash-tab.active,.dash-tab:hover{color:var(--accent-blue);border-bottom-color:var(--accent-blue);} .dashboard-body{max-width:1300px;margin:0 auto;padding:36px 24px;} /* Project cards */ .projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px;} .project-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;transition:transform 0.2s,box-shadow 0.2s,border-color 0.2s!important;cursor:pointer;display:block;text-decoration:none;} .project-card:hover{border-color:var(--border-accent);transform:translateY(-3px);box-shadow:var(--shadow-md);} .project-card-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px;} .project-card-title{font-family:var(--font-display);font-size:0.98rem;font-weight:700;color:var(--text-primary);margin-bottom:4px;line-height:1.3;} .project-card-category{font-size:0.72rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em;} .project-card-progress{margin:16px 0;} .project-card-progress-label{display:flex;justify-content:space-between;font-size:0.78rem;color:var(--text-muted);margin-bottom:8px;} .project-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding-top:16px;border-top:1px solid var(--border);} .project-card-price{font-family:var(--font-mono);font-size:0.98rem;font-weight:600;color:var(--accent-blue);} /* Section headers */ .section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;} .section-title{font-family:var(--font-display);font-size:1.15rem;font-weight:700;} /* Empty state */ .empty-state{text-align:center;padding:64px 24px;color:var(--text-muted);} .empty-state-icon{font-size:3rem;margin-bottom:16px;opacity:0.4;} .empty-state h3{color:var(--text-secondary);margin-bottom:8px;} .empty-state p{font-size:0.88rem;margin-bottom:24px;} /* File items */ .file-item{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:8px;transition:border-color 0.15s!important;} .file-item:hover{border-color:var(--border-accent);} .file-icon{font-size:1.3rem;} .file-info{flex:1;} .file-name{font-size:0.88rem;color:var(--text-primary);font-weight:500;} .file-size{font-size:0.72rem;color:var(--text-muted);} /* Milestones */ .milestone-item{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:1px solid var(--border);} .milestone-item:last-child{border-bottom:none;} .milestone-check{width:20px;height:20px;flex-shrink:0;margin-top:2px;border:2px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.7rem;transition:all 0.15s!important;} .milestone-item.done .milestone-check{background:var(--accent-green);border-color:var(--accent-green);color:#fff;} .milestone-title{font-size:0.88rem;font-weight:600;color:var(--text-primary);} .milestone-item.done .milestone-title{text-decoration:line-through;color:var(--text-muted);} .milestone-desc{font-size:0.78rem;color:var(--text-muted);margin-top:2px;} /* ═══════════════════════════════════════════════════════════════ CHAT ═══════════════════════════════════════════════════════════════ */ .chat-page{display:flex;height:calc(100vh - var(--nav-height));padding-top:var(--nav-height);} .chat-container{flex:1;display:flex;flex-direction:column;max-width:900px;margin:0 auto;width:100%;} .chat-header{padding:20px 24px;background:var(--bg-card);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:16px;} .chat-messages{flex:1;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:16px;} .message{display:flex;gap:12px;animation:msgFade 0.3s ease;} @keyframes msgFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} .message.own{flex-direction:row-reverse;} .message-avatar{width:36px;height:36px;flex-shrink:0;background:var(--gradient-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:0.9rem;color:#fff;} .message.own .message-avatar{background:linear-gradient(135deg,#22d3ee,#34d399);} .message-body{max-width:70%;} .message-name{font-size:0.72rem;color:var(--text-muted);margin-bottom:4px;font-weight:600;} .message.own .message-name{text-align:right;} .message-bubble{padding:12px 16px;border-radius:16px;font-size:0.88rem;line-height:1.5;color:var(--text-primary);background:var(--bg-elevated);border:1px solid var(--border);} .message.own .message-bubble{background:rgba(37,99,235,0.1);border-color:rgba(37,99,235,0.2);} .message-time{font-size:0.68rem;color:var(--text-muted);margin-top:4px;} .message.own .message-time{text-align:right;} .chat-input-area{padding:16px 24px;background:var(--bg-card);border-top:1px solid var(--border);display:flex;gap:12px;align-items:center;} .chat-input{flex:1;padding:12px 16px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:100px;color:var(--text-primary);font-size:0.93rem;font-family:var(--font-body);outline:none;transition:border-color 0.15s!important;} .chat-input:focus{border-color:var(--accent-blue);} .typing-indicator{font-size:0.78rem;color:var(--text-muted);padding:0 24px 8px;display:none;} .typing-indicator.show{display:block;} /* ═══════════════════════════════════════════════════════════════ DETAIL PAGES ═══════════════════════════════════════════════════════════════ */ .detail-grid{display:grid;grid-template-columns:1fr 340px;gap:32px;} @media(max-width:960px){.detail-grid{grid-template-columns:1fr;}} /* ═══════════════════════════════════════════════════════════════ MODAL ═══════════════════════════════════════════════════════════════ */ .modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:2000;align-items:center;justify-content:center;} .modal-overlay.open{display:flex;} .modal{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:40px;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;} .modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;} .modal-close{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:1.5rem;transition:color 0.15s!important;} .modal-close:hover{color:var(--text-primary);} /* ═══════════════════════════════════════════════════════════════ AUTH SPECIFIC EXTRAS ═══════════════════════════════════════════════════════════════ */ .auth-logo-img:hover{transform:scale(1.04);} .req-item{font-size:0.78rem;color:var(--text-muted);padding:2px 0;transition:color 0.2s!important;} .req-item.pass{color:var(--accent-green);} /* ═══════════════════════════════════════════════════════════════ MOBILE NAVBAR ═══════════════════════════════════════════════════════════════ */ .nav-desktop-links{display:flex;align-items:center;gap:2px;} @media(max-width:968px){ .nav-desktop-links{display:none!important;} .nav-toggle{display:flex;} .nav-user{display:none;} .nav-links{ position:fixed;top:var(--nav-height);left:0;right:0; background:var(--bg-secondary);border-bottom:1px solid var(--border); box-shadow:var(--shadow-lg);z-index:999;display:none;flex-direction:column;padding:0; } html.light .nav-links{background:#f1f5f9;} .nav-links.mobile-open{display:flex;} .mobile-nav-menu{display:flex;flex-direction:column;padding:12px 0 0;width:100%;} .mobile-nav-link{ display:block;padding:13px 24px;color:var(--text-secondary); font-size:0.93rem;font-weight:500;text-decoration:none; border-bottom:1px solid var(--border);transition:background 0.15s,color 0.15s,padding 0.15s!important; } .mobile-nav-link:hover{background:var(--bg-elevated);color:var(--text-primary);padding-left:30px;} .mobile-nav-highlight{color:var(--accent-blue);font-weight:700;} .mobile-user-section{padding:16px 24px 20px;background:var(--bg-card);border-top:2px solid var(--border-accent);margin-top:4px;} .mobile-user-info{display:flex;align-items:center;gap:12px;margin-bottom:14px;} .mobile-user-avatar{width:42px;height:42px;background:var(--gradient-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem;color:#fff;flex-shrink:0;} .mobile-user-name{font-weight:700;font-size:0.93rem;color:var(--text-primary);margin-bottom:2px;} .mobile-user-email{font-size:0.72rem;color:var(--text-muted);word-break:break-all;} .mobile-signout-btn{display:flex;align-items:center;justify-content:center;width:100%;padding:12px;background:rgba(248,113,113,0.1);border:1px solid rgba(248,113,113,0.3);border-radius:var(--radius-sm);color:var(--accent-red);font-weight:700;font-size:0.88rem;text-decoration:none;transition:background 0.15s!important;} .mobile-signout-btn:hover{background:rgba(248,113,113,0.2);color:var(--accent-red);} .nav-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px);} .nav-toggle.active span:nth-child(2){opacity:0;transform:scaleX(0);} .nav-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);} /* Page adjustments */ .auth-card{padding:32px 22px;} .stats-grid{grid-template-columns:repeat(2,1fr);} .dashboard-body{padding:24px 16px;} .projects-grid{grid-template-columns:1fr;} .card{padding:20px;} } /* ═══════════════════════════════════════════════════════════════ LIGHT MODE EXTRAS ═══════════════════════════════════════════════════════════════ */ html.light input,html.light select,html.light textarea{background:#f8fafc;border-color:var(--border);color:var(--text-primary);} html.light input:focus,html.light select:focus,html.light textarea:focus{background:#fff;} html.light thead tr{background:#eef2f8;} html.light tbody tr:hover{background:rgba(0,0,0,0.02);} html.light .chat-header,html.light .chat-input-area{background:#f1f5f9;} html.light .chat-input{background:#eef2f8;border-color:var(--border);color:var(--text-primary);} html.light .message-bubble{background:#eef2f8;border-color:var(--border);} html.light .nav-links{background:#f1f5f9;} html.light .mobile-user-section{background:#eef2f8;} html.light ::-webkit-scrollbar-track{background:#f1f5f9;} html.light ::-webkit-scrollbar-thumb{background:#d1d5db;} /* ═══════════════════════════════════════════════════════════════ BRAND EXTRAS ═══════════════════════════════════════════════════════════════ */ @keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}