:root {
    --primary: #2575fc;
    --primary-dark: #6a11cb;
    --accent: #00c9ff;
    --success: #2ecc71;
    --danger: #e74c3c;
    --warning: #f39c12;
    --dark: #1a1a2e;
    --light-bg: #f5f7ff;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', Arial, sans-serif; background: var(--light-bg); color: #222; }
a { text-decoration: none; }

/* ---------- Landing Page ---------- */
.hero {
    background: linear-gradient(-45deg, #6a11cb, #2575fc, #00c9ff, #6a11cb);
    background-size: 400% 400%;
    animation: gradientShift 12s ease infinite;
    color: #fff; text-align: center; padding: 100px 20px 140px;
    position: relative; overflow: hidden;
}
@keyframes gradientShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.hero::before, .hero::after {
    content: ''; position: absolute; border-radius: 50%; background: rgba(255,255,255,0.08);
    animation: floatShape 8s ease-in-out infinite;
}
.hero::before { width: 220px; height: 220px; top: -60px; left: -60px; }
.hero::after { width: 300px; height: 300px; bottom: -100px; right: -80px; animation-delay: 2s; }
@keyframes floatShape { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-30px) } }
.navbar {
    display:flex; justify-content:space-between; align-items:center; padding:18px 40px;
    position:absolute; top:0; left:0; right:0; z-index:5;
}
.navbar .logo { font-size:22px; font-weight:800; color:#fff; letter-spacing:1px; }
.navbar .logo span { color:#00c9ff; }
.navbar .nav-links a { color:#fff; margin-left:22px; font-weight:600; opacity:.9; transition:.2s; }
.navbar .nav-links a:hover { opacity:1; text-shadow:0 0 8px rgba(255,255,255,.6); }
.hero h1 { font-size: 3rem; font-weight: 800; animation: fadeInUp 1s ease; position:relative; z-index:2; }
.hero p { font-size: 1.2rem; margin-top: 18px; opacity:.95; animation: fadeInUp 1.2s ease; position:relative; z-index:2; }
@keyframes fadeInUp { from{ opacity:0; transform:translateY(25px);} to{ opacity:1; transform:translateY(0);} }
.hero-buttons { margin-top: 35px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; position:relative; z-index:2; }
.btn {
    display:inline-block; padding: 13px 30px; border-radius: 30px; font-weight: 700; cursor: pointer; border:none;
    transition: transform .25s, box-shadow .25s; font-size:15px;
}
.btn-primary { background:#fff; color:var(--primary-dark); }
.btn-primary:hover { transform: translateY(-3px) scale(1.03); box-shadow:0 10px 25px rgba(0,0,0,.25); }
.btn-outline { border:2px solid #fff; color:#fff; background:transparent; }
.btn-outline:hover { background:#fff; color:var(--primary-dark); transform: translateY(-3px); }
.btn-reseller { background: linear-gradient(90deg,#f39c12,#e67e22); color:#fff; box-shadow:0 8px 20px rgba(230,126,34,.4); animation: pulseGlow 2s infinite; }
@keyframes pulseGlow { 0%{box-shadow:0 0 0 0 rgba(230,126,34,.5)} 70%{box-shadow:0 0 0 14px rgba(230,126,34,0)} 100%{box-shadow:0 0 0 0 rgba(230,126,34,0)} }

.features { max-width:1150px; margin:-70px auto 0; padding:0 20px 60px; position:relative; z-index:3; }
.features-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:24px; }
.feature-card {
    background:#fff; border-radius:16px; padding:28px 22px; box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition: transform .3s, box-shadow .3s; opacity:0; animation: fadeInUp .6s ease forwards;
}
.feature-card:hover { transform: translateY(-8px); box-shadow:0 18px 35px rgba(37,117,252,.2); }
.feature-card .icon { font-size:34px; margin-bottom:12px; }
.feature-card h3 { margin-bottom:8px; color:var(--primary-dark); }
.feature-card p { font-size:14px; color:#666; line-height:1.5; }

.section-title { text-align:center; margin: 60px 0 30px; }
.section-title h2 { font-size:2rem; color:var(--dark); }
.section-title p { color:#777; margin-top:8px; }

.pricing-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; max-width:1100px; margin:0 auto; padding:0 20px 60px;}
.price-card { background:#fff; border-radius:18px; padding:34px 26px; text-align:center; box-shadow:0 10px 30px rgba(0,0,0,.08); transition:.3s; }
.price-card:hover { transform: translateY(-8px); }
.price-card.popular { border:2px solid var(--primary); position:relative; }
.price-card.popular::before { content:'MOST POPULAR'; position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--primary); color:#fff; font-size:11px; font-weight:700; padding:5px 14px; border-radius:20px; }
.price-card h3 { color:var(--primary-dark); }
.price-card .amt { font-size:2.4rem; font-weight:800; margin:14px 0; color:var(--dark); }
.price-card .amt span { font-size:1rem; color:#999; font-weight:400;}
.price-card ul { list-style:none; text-align:left; margin: 20px 0; }
.price-card ul li { padding:6px 0; color:#555; font-size:14px; }
.price-card ul li::before { content:'✔ '; color:var(--success); font-weight:700; }

.cta-section { background: linear-gradient(90deg,var(--primary-dark),var(--primary)); color:#fff; text-align:center; padding:60px 20px; }
.cta-section h2 { font-size:2rem; margin-bottom:12px; }
.footer { background:var(--dark); color:#ccc; padding:40px 20px 20px; text-align:center; }
.footer .contact-row { display:flex; gap:30px; justify-content:center; flex-wrap:wrap; margin:18px 0; font-size:14px; }
.footer .contact-row div { display:flex; align-items:center; gap:8px; }
.footer small { display:block; margin-top:20px; opacity:.6; }

/* ---------- Auth pages ---------- */
.auth-wrapper { min-height:100vh; display:flex; align-items:center; justify-content:center; background: linear-gradient(-45deg,#6a11cb,#2575fc,#00c9ff,#92fe9d); background-size:400% 400%; animation: gradientShift 15s ease infinite; padding:20px;}
.auth-card { background:#fff; padding:40px; border-radius:18px; width:100%; max-width:400px; box-shadow:0 20px 50px rgba(0,0,0,.3); animation: popIn .5s ease; }
@keyframes popIn { from{opacity:0; transform:scale(.95);} to{opacity:1; transform:scale(1);} }
.auth-card h2 { text-align:center; color:var(--primary-dark); margin-bottom:6px; }
.auth-card p.sub { text-align:center; color:#888; font-size:13px; margin-bottom:24px; }
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:#333; }
.form-group input, .form-group select, .form-group textarea {
    width:100%; padding:11px 14px; border:1px solid #ddd; border-radius:9px; font-size:14px; transition:.2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--primary); outline:none; box-shadow:0 0 0 3px rgba(37,117,252,.15); }
.btn-full { width:100%; padding:13px; border:none; border-radius:9px; background:linear-gradient(90deg,var(--primary-dark),var(--primary)); color:#fff; font-weight:700; font-size:15px; cursor:pointer; transition:.2s; }
.btn-full:hover { transform: scale(1.02); }
.alert { padding:11px 14px; border-radius:9px; margin-bottom:16px; font-size:13px; animation: fadeInUp .4s ease; }
.alert-success { background:#d7f9e9; color:#1a7a4c; }
.alert-error { background:#ffe1e1; color:#c0392b; }
.auth-links { text-align:center; margin-top:16px; font-size:13px; }

/* ---------- Panel Layout ---------- */
.app-wrapper { display:flex; min-height:100vh; }
.app-sidebar {
    width:250px; background: linear-gradient(180deg,#1a1a2e,#232342); color:#fff; padding:20px 0; flex-shrink:0;
    position:sticky; top:0; height:100vh; overflow-y:auto;
}
.app-sidebar .brand { text-align:center; padding:10px 20px 25px; font-size:20px; font-weight:800; border-bottom:1px solid rgba(255,255,255,.1); }
.app-sidebar .brand span { color:var(--accent); }
.app-sidebar nav a {
    display:flex; align-items:center; gap:12px; padding:13px 24px; color:#c9c9e0; font-weight:500; font-size:14.5px;
    transition: .2s; border-left:3px solid transparent;
}
.app-sidebar nav a:hover, .app-sidebar nav a.active { background: rgba(255,255,255,.08); color:#fff; border-left-color: var(--accent); }
.app-main { flex:1; min-width:0; }
.app-topbar { background:#fff; padding:16px 28px; display:flex; justify-content:space-between; align-items:center; box-shadow:0 2px 10px rgba(0,0,0,.05); position:sticky; top:0; z-index:10;}
.app-topbar h1 { font-size:20px; color:var(--dark); }
.topbar-right { display:flex; align-items:center; gap:16px; }
.badge-role { background: var(--primary); color:#fff; padding:4px 12px; border-radius:20px; font-size:12px; font-weight:700; text-transform:uppercase; }
.logout-btn { background:var(--danger); color:#fff; padding:8px 18px; border-radius:20px; font-size:13px; font-weight:600; }
.content { padding:26px; animation: fadeInUp .4s ease; }

.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; margin-bottom:28px; }
.stat-card { background:#fff; border-radius:14px; padding:22px; box-shadow:0 6px 20px rgba(0,0,0,.06); display:flex; align-items:center; gap:16px; transition:.25s; }
.stat-card:hover { transform:translateY(-5px); box-shadow:0 12px 28px rgba(37,117,252,.18); }
.stat-card .stat-icon { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:24px; color:#fff; }
.stat-card .stat-info .num { font-size:1.6rem; font-weight:800; color:var(--dark); }
.stat-card .stat-info .label { font-size:13px; color:#888; }

.panel-box { background:#fff; border-radius:14px; padding:24px; box-shadow:0 6px 20px rgba(0,0,0,.06); margin-bottom:24px; }
.panel-box h3 { margin-bottom:16px; color:var(--dark); }
table.data-table { width:100%; border-collapse:collapse; font-size:14px; }
table.data-table th { text-align:left; padding:12px; background:#f4f6fb; color:#555; font-weight:700; font-size:12.5px; text-transform:uppercase; }
table.data-table td { padding:12px; border-bottom:1px solid #f0f0f5; }
table.data-table tr:hover td { background:#f9fbff; }
.status-badge { padding:4px 12px; border-radius:20px; font-size:12px; font-weight:700; }
.status-active { background:#d7f9e9; color:#1a7a4c; }
.status-inactive { background:#ffe1e1; color:#c0392b; }
.status-open { background:#fff3cd; color:#8a6d00; }
.status-closed { background:#e2e3e5; color:#555; }
.status-answered { background:#d7f9e9; color:#1a7a4c; }

.action-link { padding:5px 12px; border-radius:6px; font-size:12.5px; font-weight:600; margin-right:6px; display:inline-block; }
.action-edit { background:#e7f0ff; color:var(--primary); }
.action-delete { background:#ffe1e1; color:var(--danger); }
.action-view { background:#eafaf1; color:var(--success); }

.btn-add { background: linear-gradient(90deg,var(--primary-dark),var(--primary)); color:#fff; padding:10px 20px; border-radius:9px; font-weight:700; font-size:13.5px; border:none; cursor:pointer; }

@media (max-width: 900px) {
    .app-sidebar { position:fixed; left:-260px; z-index:100; transition:.3s; }
    .app-sidebar.open { left:0; }
    .navbar { flex-direction:column; gap:10px; position:relative; }
}