/* ═══════════════════════════════════════════════════════════
   Grepomat Design System v2
   Glassmorphism dark theme with accent gradients
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
    --bg: #020617; --bg2: #0f172a;
    --surface: rgba(30, 41, 59, 0.7);
    --surface2: rgba(30, 41, 59, 0.45);
    --border: rgba(255,255,255,0.08);
    --border2: rgba(255,255,255,0.14);
    --primary: #3b82f6; --primary-hover: #60a5fa;
    --primary-bg: rgba(59,130,246,0.12);
    --accent: #8b5cf6; --accent-bg: rgba(139,92,246,0.12);
    --text: #f1f5f9; --text2: #cbd5e1; --muted: #94a3b8;
    --success: #10b981; --success-bg: rgba(16,185,129,0.12);
    --warning: #f59e0b; --warning-bg: rgba(245,158,11,0.12);
    --danger: #ef4444; --danger-bg: rgba(239,68,68,0.12);
    --radius: 12px; --radius-sm: 8px;
    --shadow: 0 25px 50px -12px rgba(0,0,0,0.45);
    --shadow-sm: 0 4px 6px -1px rgba(0,0,0,0.3);
    --t: 0.2s ease;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
    font-family:'Inter',system-ui,-apple-system,sans-serif;
    background:linear-gradient(135deg,#020617 0%,#0f172a 40%,#1e1b4b 100%);
    color:var(--text);min-height:100vh;line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:var(--primary-hover);text-decoration:none;transition:color var(--t)}
a:hover{color:var(--primary)}
h1,h2,h3,h4{font-weight:700;line-height:1.25;color:var(--text)}
h1{font-size:2.5rem;letter-spacing:-0.03em}
h2{font-size:1.75rem;letter-spacing:-0.02em}
h3{font-size:1.25rem}
h4{font-size:1rem}
p{color:var(--muted)}

/* Nav */
#nav{position:sticky;top:0;z-index:100;background:rgba(15,23,42,0.6);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
.nav-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:24px;padding:14px 24px}
.logo{font-size:1.3rem;font-weight:800;background:linear-gradient(135deg,#3b82f6,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;flex-shrink:0}
.nav-links{display:flex;gap:4px;align-items:center;flex:1}
.nav-right{display:flex;gap:4px;align-items:center;flex-shrink:0}
.nav-link{padding:6px 14px;border-radius:var(--radius-sm);color:var(--muted);font-size:0.9rem;font-weight:500;transition:all var(--t)}
.nav-link:hover,.nav-link.active{color:var(--text);background:rgba(255,255,255,0.06)}
.nav-user{color:var(--text2);font-size:0.85rem;padding:0 8px}
.nav-toggle{display:none;background:none;border:none;color:var(--text);font-size:1.5rem;cursor:pointer}

/* Main */
#main-content{min-height:calc(100vh - 200px)}

/* Footer */
#footer{border-top:1px solid var(--border);background:rgba(15,23,42,0.3);margin-top:60px;padding:48px 24px 24px}
.footer-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
.footer-col h4{color:var(--text);margin-bottom:12px;font-size:0.95rem}
.footer-col p{font-size:0.9rem}
.footer-col a{display:block;color:var(--muted);font-size:0.9rem;padding:4px 0}
.footer-col a:hover{color:var(--text)}
.footer-bottom{grid-column:1/-1;text-align:center;padding-top:24px;border-top:1px solid var(--border);color:var(--muted);font-size:0.8rem}

/* Cards */
.card{background:var(--surface);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow);transition:transform var(--t),box-shadow var(--t)}
.card:hover{transform:translateY(-2px);box-shadow:0 35px 60px -15px rgba(0,0,0,0.55)}

/* Buttons */
.btn{display:inline-block;padding:11px 22px;background:rgba(255,255,255,0.06);color:var(--text);border:1px solid var(--border2);border-radius:var(--radius-sm);font-family:inherit;font-size:0.9rem;font-weight:600;cursor:pointer;transition:all var(--t);text-decoration:none;line-height:1.4}
.btn:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.2);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--accent));border-color:transparent;color:#fff}
.btn-primary:hover{filter:brightness(1.15)}
.btn-success{background:var(--success);border-color:transparent;color:#fff}
.btn-success:hover{filter:brightness(1.15)}
.btn-danger{background:var(--danger);border-color:transparent;color:#fff}
.btn-danger:hover{filter:brightness(1.15)}
.btn-outline{background:transparent;border-color:var(--primary);color:var(--primary)}
.btn-outline:hover{background:var(--primary-bg)}
.btn-sm{padding:6px 14px;font-size:0.8rem}
.btn-lg{padding:16px 32px;font-size:1.1rem}
.btn:disabled{opacity:0.5;cursor:not-allowed;transform:none}

/* Forms */
.form-group{margin-bottom:18px}
.form-group label{display:block;margin-bottom:6px;font-size:0.85rem;font-weight:600;color:var(--muted)}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:11px 14px;background:rgba(0,0,0,0.25);border:1px solid var(--border2);border-radius:var(--radius-sm);color:var(--text);font-family:inherit;font-size:0.95rem;outline:none;transition:border-color var(--t),box-shadow var(--t)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(59,130,246,0.15)}
.form-group .hint{font-size:0.8rem;color:var(--muted);margin-top:4px}
.form-error{color:var(--danger);font-size:0.85rem;margin-top:6px}

/* Tables */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--border);font-size:0.9rem}
th{color:var(--muted);font-weight:600;text-transform:uppercase;font-size:0.75rem;letter-spacing:0.05em}
tr:hover td{background:rgba(255,255,255,0.02)}

/* Badges */
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:0.75rem;font-weight:600;letter-spacing:0.02em}
.badge-default{background:rgba(255,255,255,0.08);color:var(--muted)}
.badge-success{background:var(--success-bg);color:var(--success)}
.badge-warning{background:var(--warning-bg);color:var(--warning)}
.badge-danger{background:var(--danger-bg);color:var(--danger)}
.badge-primary{background:var(--primary-bg);color:var(--primary)}

/* Token box */
.token-box{font-family:'SF Mono','Fira Code',monospace;background:rgba(0,0,0,0.35);padding:12px 18px;border-radius:var(--radius-sm);letter-spacing:0.05em;color:var(--primary-hover);word-break:break-all;font-size:0.9rem;border:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px}
.token-box .copy-btn{background:rgba(255,255,255,0.06);border:1px solid var(--border2);border-radius:6px;color:var(--muted);cursor:pointer;padding:6px 12px;font-size:0.8rem;flex-shrink:0;transition:all var(--t)}
.token-box .copy-btn:hover{color:var(--text);border-color:var(--primary)}

/* Modal */
.modal-overlay{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center}
.modal{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius);box-shadow:0 40px 80px rgba(0,0,0,0.5);max-width:500px;width:92%;animation:fadeIn 0.2s ease}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--border)}
.modal-header h3{margin:0}
.modal-close{background:none;border:none;color:var(--muted);font-size:1.5rem;cursor:pointer;padding:0 4px}
.modal-body{padding:24px}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;padding:16px 24px;border-top:1px solid var(--border)}

/* Toasts */
#toast-container{position:fixed;top:20px;right:20px;z-index:2000;display:flex;flex-direction:column;gap:8px}
.toast{padding:12px 20px;border-radius:var(--radius-sm);font-size:0.9rem;font-weight:500;box-shadow:var(--shadow-sm);cursor:pointer;animation:slideIn 0.3s ease;max-width:380px}
.toast-info{background:var(--bg2);color:var(--text);border:1px solid var(--border2)}
.toast-success{background:#064e3b;color:#6ee7b7;border:1px solid #065f46}
.toast-error{background:#7f1d1d;color:#fca5a5;border:1px solid #991b1b}

/* Spinner */
.spinner-wrap{text-align:center;padding:60px 20px}
.spinner{width:40px;height:40px;margin:0 auto 16px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin 0.8s linear infinite}
.empty-state{text-align:center;padding:60px 20px}

/* Layout */
.container{max-width:1100px;margin:0 auto;padding:0 24px}
.container-sm{max-width:480px;margin:60px auto;padding:0 24px}
.section{padding:80px 0}
.section-sm{padding:40px 0}
.flex{display:flex}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}
.justify-between{justify-content:space-between}.justify-center{justify-content:center}
.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-24{gap:24px}
.grid{display:grid}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}
.text-center{text-align:center}.text-muted{color:var(--muted)}.text-sm{font-size:0.85rem}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}
.hidden{display:none!important}.w-full{width:100%}

/* Hero */
.hero{text-align:center;padding:100px 24px 80px;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(ellipse at 50% 0%,rgba(59,130,246,0.08) 0%,transparent 60%),radial-gradient(ellipse at 80% 50%,rgba(139,92,246,0.06) 0%,transparent 50%);pointer-events:none}
.hero h1{font-size:clamp(2rem,5vw,3.5rem);margin-bottom:16px;background:linear-gradient(135deg,#fff 0%,#94a3b8 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero p{font-size:1.15rem;max-width:600px;margin:0 auto 32px;color:var(--muted)}
.hero .btn-group{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Features */
.features{padding:60px 24px;max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.feature-card{background:var(--surface2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:var(--radius);padding:24px;transition:all var(--t)}
.feature-card:hover{border-color:var(--border2);transform:translateY(-2px);background:var(--surface)}
.feature-icon{font-size:2rem;margin-bottom:12px}
.feature-card h3{font-size:1.05rem;margin-bottom:6px}
.feature-card p{font-size:0.9rem;color:var(--muted)}

/* Pricing */
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;max-width:1100px;margin:0 auto;padding:40px 24px}
.pricing-card{background:var(--surface);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:var(--radius);padding:32px 24px;text-align:center;transition:all var(--t);position:relative}
.pricing-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.pricing-card.featured{border-color:var(--primary);box-shadow:0 0 40px rgba(59,130,246,0.15);background:linear-gradient(180deg,rgba(59,130,246,0.08),var(--surface))}
.pricing-card.featured::before{content:'Popular';position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:4px 16px;border-radius:20px;font-size:0.75rem;font-weight:700;text-transform:uppercase}
.pricing-name{font-size:1rem;color:var(--muted);margin-bottom:8px;text-transform:uppercase;letter-spacing:0.05em}
.pricing-price{font-size:2.5rem;font-weight:800;color:var(--text);margin-bottom:4px}
.pricing-period{font-size:0.9rem;color:var(--muted);margin-bottom:20px}
.pricing-features{text-align:left;margin-bottom:24px}
.pricing-features li{padding:6px 0;font-size:0.9rem;color:var(--text2);list-style:none}
.pricing-features li::before{content:'✓ ';color:var(--success);font-weight:bold}

/* Stats */
.stats-row{display:flex;gap:16px;flex-wrap:wrap}
.stat-card{flex:1;min-width:140px;background:var(--surface);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:var(--radius);padding:20px;text-align:center}
.stat-number{font-size:2rem;font-weight:800;color:var(--text)}
.stat-label{font-size:0.8rem;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:0.03em}

/* Dashboard */
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}

/* Docs */
.docs-layout{display:grid;grid-template-columns:260px 1fr;gap:30px;max-width:1200px;margin:0 auto;padding:40px 24px;align-items:start}
.docs-sidebar{position:sticky;top:80px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px}
.docs-sidebar h4{margin-bottom:12px}
.docs-sidebar a{display:block;padding:6px 0;color:var(--muted);font-size:0.9rem;border-bottom:1px solid rgba(255,255,255,0.03);transition:color var(--t)}
.docs-sidebar a:hover,.docs-sidebar a.active{color:var(--text)}
.docs-sidebar .docs-search{width:100%;padding:8px 12px;margin-bottom:16px;background:rgba(0,0,0,0.25);border:1px solid var(--border2);border-radius:var(--radius-sm);color:var(--text);font-family:inherit;font-size:0.9rem;outline:none}
.docs-sidebar .docs-search:focus{border-color:var(--primary)}
.docs-content{min-width:0}
.docs-content h1{font-size:2rem;margin-bottom:16px}
.docs-content h2{font-size:1.4rem;margin-top:32px;margin-bottom:12px}
.docs-content h3{font-size:1.1rem;margin-top:24px;margin-bottom:8px}
.docs-content p{margin-bottom:12px;line-height:1.7}
.docs-content ul,.docs-content ol{margin-bottom:12px;padding-left:24px;color:var(--text2)}
.docs-content li{margin-bottom:6px}
.docs-content code{background:rgba(0,0,0,0.3);padding:2px 6px;border-radius:4px;font-family:'SF Mono','Fira Code',monospace;font-size:0.85em;color:var(--primary-hover)}
.docs-content pre{background:rgba(0,0,0,0.4);border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px;overflow-x:auto;margin-bottom:16px;font-size:0.85rem}
.docs-content pre code{background:none;padding:0}
.docs-content blockquote{border-left:3px solid var(--primary);padding:8px 16px;margin-bottom:16px;background:var(--primary-bg);border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--text2)}

/* Animations */
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
.animate-in{animation:fadeIn 0.4s ease forwards}

/* Responsive */
@media(max-width:768px){
    .nav-links,.nav-right{display:none;flex-direction:column}
    .nav-links.open,.nav-right.open{display:flex}
    .nav-toggle{display:block;margin-left:auto}
    .nav-inner{flex-wrap:wrap}
    .nav-links.open,.nav-right.open{width:100%;padding:8px 0;border-top:1px solid var(--border)}
    .nav-right.open{border-top:none;padding-bottom:8px}
    .hero{padding:60px 20px}.hero h1{font-size:1.8rem}
    .footer-inner{grid-template-columns:1fr;gap:24px}
    .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
    .dash-grid{grid-template-columns:1fr}
    .docs-layout{grid-template-columns:1fr}.docs-sidebar{position:static}
    .pricing-grid{grid-template-columns:1fr;max-width:400px;margin:0 auto}
    table{font-size:0.8rem}th,td{padding:8px 10px}
}
@media(max-width:480px){
    .hero h1{font-size:1.5rem}
    .nav-inner{padding:10px 16px}
    .card{padding:20px}
    .btn-lg{padding:12px 24px;font-size:1rem}
}