/* ==========================================================
ULTRA-PREMIUM BASE TYPOGRAPHY & LAYOUT
========================================================== */
body, h1, h2, h3, h4, h5, h6, p, label, input, button, select, textarea {
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}
body { background-color: #f4f7f6; margin: 0; padding: 0; overflow-x: hidden;}

/* AUTH & PAYWALL SCREENS */
.auth-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f172a; padding: 20px;}
.auth-box { background: #fff; width: 100%; max-width: 500px; border-radius: 20px; padding: 40px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); text-align: center;}
.auth-logo { color: #6366f1; font-size: 32px; margin-bottom: 16px; }
.auth-title { font-weight: 800; color: #0f172a; font-size: 24px; margin: 0 0 8px 0; letter-spacing: -0.5px;}
.auth-subtitle { color: #64748b; font-size: 14px; margin: 0 0 32px 0; line-height: 1.5;}

.auth-tabs { display:flex; border-bottom:1px solid #e2e8f0; margin-bottom:24px; }
.auth-tab { flex:1; padding:12px; font-weight:600; cursor:pointer; color:#64748b; border-bottom:2px solid transparent; transition:0.2s;}
.auth-tab.active { color:#4f46e5; border-bottom-color:#4f46e5; }
.video-box { width: 100%; height: 250px; background: #000; border-radius: 10px; margin-bottom: 16px; object-fit: cover; }

.auth-input-group { text-align: left; margin-bottom: 16px; }
.auth-input-group label { display: block; font-size: 13px; font-weight: 600; color: #334155; margin-bottom: 8px;}
.auth-input { width: 100%; padding: 12px 16px; border: 1px solid #cbd5e1; border-radius: 10px; outline: none; font-family: "Inter", sans-serif; transition: 0.2s; box-sizing: border-box;}
.auth-input:focus { border-color: #6366f1; box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15); }

.auth-btn { width: 100%; padding: 14px; background: #4f46e5; color: #fff; border: none; border-radius: 10px; font-weight: 600; font-size: 15px; cursor: pointer; transition: 0.2s; box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.2); margin-top: 8px;}
.auth-btn:hover { background: #4338ca; transform: translateY(-1px); }
.auth-switch { margin-top: 24px; font-size: 14px; color: #64748b; }
.auth-switch a { color: #4f46e5; font-weight: 600; cursor: pointer; text-decoration: none; }

/* LANDING PAGE MODULES */
.landing-hero { background: #0f172a; color: #fff; padding: 80px 20px; text-align: center; }
.landing-hero h1 { font-weight: 800; font-size: 42px; margin: 0 0 16px 0; letter-spacing: -1px; }
.landing-hero p { color: #94a3b8; font-size: 18px; max-width: 600px; margin: 0 auto 32px auto; line-height: 1.6; }
.landing-container { background: #f8fafc; padding: 60px 20px; min-height: calc(100vh - 250px); }
.landing-grid { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.landing-card { background: #fff; padding: 24px; border-radius: 16px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); border: 1px solid #e2e8f0; cursor: pointer; transition: all 0.3s ease; text-align: left; }
.landing-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px -5px rgba(99,102,241,0.2); border-color: #6366f1; }
.landing-card-icon { width: 48px; height: 48px; background: #e0e7ff; color: #4f46e5; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 16px; }
.landing-card-title { font-weight: 700; font-size: 16px; color: #0f172a; margin: 0 0 8px 0; }
.landing-card-cat { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin: 0; }

/* FLOATING CHAT WIDGET */
.chat-widget { position: fixed; bottom: 30px; right: 30px; z-index: 9999; }
.chat-btn { width: 65px; height: 65px; border-radius: 50%; background: #f97316; color: white; border: none; font-size: 28px; cursor: pointer; box-shadow: 0 8px 15px rgba(249, 115, 22, 0.3); transition: 0.3s; display: flex; align-items: center; justify-content: center;}
.chat-btn:hover { transform: scale(1.1); background: #ea580c; }
.chat-window { display: none; position: absolute; bottom: 85px; right: 0; width: 440px; background: white; border-radius: 16px; box-shadow: 0 15px 35px rgba(0,0,0,0.2); overflow: hidden; flex-direction: column; border: 1px solid #e2e8f0; transform-origin: bottom right; animation: scaleUp 0.3s ease;}
.chat-window.show { display: flex; }
.chat-header { background: #1e40af; color: white; padding: 18px 24px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; font-size: 16px;}
.chat-body { height: 420px; padding: 24px; overflow-y: auto; background: #f8fafc; font-size: 14px; display: flex; flex-direction: column; gap: 16px; scroll-behavior: smooth;}
.chat-msg { max-width: 92%; padding: 14px 18px; border-radius: 16px; line-height: 1.6; box-shadow: 0 2px 4px rgba(0,0,0,0.02); word-wrap: break-word;}
.chat-msg.bot { background: #ffffff; color: #1e293b; align-self: flex-start; border-bottom-left-radius: 4px; border: 1px solid #e2e8f0;}
.chat-msg.user { background: #f97316; color: white; align-self: flex-end; border-bottom-right-radius: 4px;}
.chat-options { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; width: 100%; }
.chat-option-btn { background: white; border: 1px solid #cbd5e1; color: #334155; padding: 12px 16px; border-radius: 12px; font-size: 13px; cursor: pointer; text-align: left; transition: all 0.2s ease; font-weight: 600; display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box;}
.chat-option-btn:hover { background: #f1f5f9; border-color: #f97316; color: #ea580c; transform: translateY(-1px); box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
@media (max-width: 640px) {
.chat-window { width: calc(100vw - 40px); right: -10px; bottom: 85px; }
}

/* APP LAYOUT */
.sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; width: 280px; background-color: #0f172a; color: #f8fafc; overflow-y: auto; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 4px 0 10px rgba(0,0,0,0.1); display: flex; flex-direction: column;}
.main-content { margin-left: 280px; min-height: 100vh; transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column;}

.sidebar-header { padding: 24px; border-bottom: 1px solid #1e293b; display: flex; justify-content: space-between; align-items: center; position: sticky; top:0; background: #0f172a; z-index: 10;}
.sidebar-header h4 { margin: 0; font-weight: 800; letter-spacing: -0.5px; font-size: 14px; color: white;}
.close-sidebar-btn { display: none; background: transparent; border: none; color: #94a3b8; font-size: 14px; cursor: pointer; transition: 0.2s;}
.close-sidebar-btn:hover { color: #fff; }

.sidebar-item { padding: 12px 24px; display: block; text-decoration: none; transition: all 0.2s ease; cursor: pointer; border-left: 4px solid transparent; color: #94a3b8; font-size: 10px; font-weight: 500;}
.sidebar-item:hover { background-color: #1e293b; color: #f8fafc; }
.sidebar-item.active { background-color: #1e293b; color: #6366f1; border-left-color: #6366f1; font-weight: 600; }
.sidebar-item i { width: 20px; text-align: center; margin-right: 10px; font-size: 14px;}
.sidebar-category { font-size: 11px; text-transform: uppercase; color: #64748b; font-weight: 700; margin: 28px 24px 8px; letter-spacing: 1px;}

.top-header { padding: 16px 24px; background: #ffffff; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 40; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.menu-btn { display: none; background: #f1f5f9; border: none; border-radius: 8px; padding: 8px 12px; cursor: pointer; transition: 0.2s; color: #475569;}
.menu-btn:hover { background: #e2e8f0; color: #0f172a; }
.page-title { margin: 0; font-weight: 800; color: #0f172a; letter-spacing: -0.5px; font-size: 16px;}

.badge { background: #e0e7ff; color: #4338ca; padding: 6px 12px; border-radius: 9999px; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px;}
.badge.green { background: #dcfce3; color: #166534; }
.badge.red { background: #fee2e2; color: #991b1b; }

.workspace { padding: 32px; max-width: 1600px; margin: 0 auto; width: 100%; box-sizing: border-box; flex: 1;}
.enterprise-card { background: #fff; border-radius: 16px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); border: 1px solid #e2e8f0; padding: 24px; margin-bottom: 24px; }
.enterprise-card-header { margin: 0 0 24px 0; font-weight: 800; font-size: 18px; color: #0f172a; display: flex; align-items: center; justify-content: space-between;}

.jqx-tabs-header { display: none !important; }

/* SAAS GRID OVERRIDES */
.grid-wrapper { width: 100%; overflow-x: auto; border-radius: 12px; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);}
.jqx-widget { font-family: 'Inter', sans-serif !important; font-size: 14px !important; border: none !important;}
.jqx-grid { border: none !important; }
.jqx-grid-header { background-color: #f8fafc !important; border-bottom: 1px solid #e2e8f0 !important;}
.jqx-widget-header { border-color: #e2e8f0 !important; background: #f8fafc !important; color: #64748b !important; font-weight: 600 !important; font-size: 12px !important; text-transform: uppercase; letter-spacing: 0.05em; padding-bottom: 4px;}
.jqx-grid-cell { border-bottom: 1px solid #f1f5f9 !important; border-right: none !important; border-left: none !important; border-top: none !important; background-color: #ffffff !important; color: #334155 !important; font-size: 14px !important; display: flex; align-items: center;}
.jqx-grid-cell-alt { background-color: #fafafa !important; }
.jqx-grid-cell-hover { background-color: #f1f5f9 !important; }
.jqx-grid-cell-selected { background-color: #e0e7ff !important; color: #4338ca !important;}

.saas-icon-btn { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; font-size: 16px;}
.saas-icon-btn.edit { color: #6366f1; }
.saas-icon-btn.edit:hover { color: #4338ca; transform: scale(1.1); }
.saas-icon-btn.delete { color: #ef4444; }
.saas-icon-btn.delete:hover { color: #b91c1c; transform: scale(1.1); }
.saas-icon-btn.join { color: #10b981; font-size: 13px; font-weight: 700; background: #ecfdf5; padding: 4px 12px; border-radius: 6px; }
.saas-icon-btn.join:hover { background: #10b981; color: white; transform: scale(1.05); }

/* SAAS MODAL */
.saas-modal-backdrop {
position: fixed; inset: 0; background: rgba(15, 23, 42, 0.4); backdrop-filter: blur(4px);
z-index: 99999; display: flex; align-items: center; justify-content: center;
opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
padding: 20px; box-sizing: border-box;
}
.saas-modal-backdrop.show { opacity: 1; visibility: visible; }

.saas-modal-box {
background: #ffffff; border-radius: 20px; width: 100%; max-width: 600px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255,255,255,0.1);
transform: scale(0.95) translateY(10px); transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
display: flex; flex-direction: column; max-height: 100%; position: relative; overflow: hidden;
}
.saas-modal-backdrop.show .saas-modal-box { transform: scale(1) translateY(0); }

.saas-modal-box.fullscreen { max-width: 95vw; height: 95vh; border-radius: 12px; }

.saas-modal-header { padding: 24px 32px 20px; border-bottom: 1px solid #f1f5f9; display: flex; justify-content: space-between; align-items: flex-start; background: #fff;}
.saas-modal-title { font-size: 1.25rem; font-weight: 800; color: #0f172a; margin: 0 0 6px 0; letter-spacing: -0.5px; display: flex; align-items: center; gap: 10px;}
.saas-modal-subtitle { font-size: 0.875rem; color: #64748b; margin: 0; line-height: 1.5; }

.saas-close-btn {
background: #f8fafc; border: none; width: 32px; height: 32px; border-radius: 50%; color: #64748b; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center;
}
.saas-close-btn:hover { background: #e2e8f0; color: #0f172a; }

.saas-modal-body { padding: 32px; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; background: #ffffff; }

.saas-input-wrapper { display: flex; flex-direction: column; gap: 8px; }
.saas-label { font-size: 0.8125rem; font-weight: 600; color: #334155; display: flex; align-items: center;}
.saas-label span.req { color: #ef4444; margin-left: 4px; }
.saas-input {
padding: 12px 16px; font-size: 0.875rem; border: 1px solid #e2e8f0; border-radius: 10px;
background: #ffffff; color: #0f172a; outline: none; transition: all 0.2s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.02);
font-family: "Inter", sans-serif;
}
.saas-input:hover { border-color: #cbd5e1; }
.saas-input:focus { border-color: #6366f1; box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15); }
.saas-input:disabled { background: #f8fafc; color: #94a3b8; cursor: not-allowed; border-color: transparent; box-shadow: none;}

.saas-modal-footer { padding: 20px 32px; border-top: 1px solid #f1f5f9; background: #f8fafc; display: flex; justify-content: flex-end; gap: 12px; }
.saas-btn-cancel { padding: 10px 20px; font-size: 0.875rem; font-weight: 600; color: #475569; background: transparent; border: 1px solid transparent; border-radius: 8px; cursor: pointer; transition: 0.2s; }
.saas-btn-cancel:hover { background: #e2e8f0; color: #0f172a; }
.saas-btn-save { padding: 10px 24px; font-size: 0.875rem; font-weight: 600; color: #ffffff; background: #4f46e5; border: none; border-radius: 8px; cursor: pointer; transition: 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.1); display: flex; align-items: center; gap: 8px;}
.saas-btn-save:hover { background: #4338ca; box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.2); transform: translateY(-1px); }

.saas-toolbar-btn { background: #0f172a; color: white; padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 13px; border: none; cursor: pointer; transition: 0.2s; display: flex; align-items: center; gap: 8px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.saas-toolbar-btn:hover { background: #1e293b; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }

.mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(2px); z-index: 45; opacity: 0; transition: 0.3s; }
.mobile-overlay.show { display: block; opacity: 1; }

@media (max-width: 1024px) {
.sidebar { transform: translateX(-100%); }
.sidebar.open { transform: translateX(0); }
.main-content { margin-left: 0; }
.menu-btn { display: block; }
.close-sidebar-btn { display: block; }
}
@media (max-width: 640px) {
.workspace { padding: 16px; }
.enterprise-card { padding: 16px; border-radius: 12px;}
.saas-modal-body { grid-template-columns: 1fr; gap: 16px; padding: 24px; }
.saas-modal-header { padding: 24px; }
.saas-modal-footer { padding: 16px 24px; }
.saas-modal-box { border-radius: 16px; max-height: 100%;}
}


.layout-card.layout-card-selected .layout-icon { color: #4f46e5 !important; }

/* RESUME BUILDER MODAL OVERRIDES */
.resume-layout-card { border: 2px solid #e2e8f0; border-radius: 8px; padding: 24px; cursor: pointer; text-align: center; transition: 0.2s; background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height: 180px; }
.resume-layout-card:hover { border-color: #6366f1; background: #f8fafc; }
.resume-layout-card input[type="radio"] { display: none; }
.resume-layout-card input[type="radio"]:checked + div { color: #4f46e5; font-weight: bold; }
.resume-layout-card.layout-card-selected { border-color: #4f46e5; background: #eff6ff; box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.2); }
.resume-layout-card.layout-card-selected .layout-icon { color: #4f46e5 !important; }

.resume-section-item { background: #fff; border: 1px solid #e2e8f0; padding: 16px; border-radius: 8px; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; font-weight: 600; color: #334155; }
.resume-section-item .controls { display: flex; gap: 8px; }
.resume-section-item button { background: #f1f5f9; border: none; padding: 6px 10px; border-radius: 4px; cursor: pointer; color: #64748b; }
.resume-section-item button:hover { background: #e2e8f0; color: #0f172a; }

.dyn-row { background: #f8fafc; border: 1px dashed #cbd5e1; padding: 16px; border-radius: 8px; margin-bottom: 16px; position: relative;}
.dyn-row-del { position: absolute; top: 16px; right: 16px; background: #fee2e2; color: #ef4444; border: none; padding: 4px 8px; border-radius: 4px; font-size: 12px; cursor: pointer;}
.dyn-row-del:hover { background: #fca5a5; }