:root {
    --primary: #ffffff;
    --accent: #e8e0d0;
    --bg: #0e0e0e;
    --bg-card: #1a1a1a;
    --bg-card2: #141414;
    --border: rgba(255,255,255,0.08);
    --text: #f0ede8;
    --text-muted: rgba(240,237,232,0.45);
    --radius: 16px;
    --blue: #4f8bff;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    min-height: 100vh;
}

/* ── NAV ── */
.nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 48px; height: 60px;
    background: rgba(14,14,14,0.85);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
}
.nav-logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.nav-logo-icon { width:28px; height:28px; background:#3B82F6; border-radius:7px; display:flex; align-items:center; justify-content:center; }
.nav-logo-icon svg { width:16px; height:16px; }
.nav-logo-name { font-size:15px; font-weight:700; color:#fff; letter-spacing:-0.3px; }
.nav-right { display:flex; align-items:center; gap:10px; }
.user-bar { display:flex; align-items:center; gap:8px; }
.user-email { font-size:13px; color:var(--text-muted); max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.btn-logout {
    padding:6px 14px; background:transparent; border:1px solid var(--border);
    border-radius:8px; font-size:13px; color:var(--text-muted); cursor:pointer;
    transition: border-color .15s, color .15s;
}
.btn-logout:hover { border-color:rgba(255,80,80,0.5); color:#ff6060; }
.btn-header-login {
    padding:7px 18px; background:#fff; color:#0e0e0e;
    border:none; border-radius:8px; font-size:13px; font-weight:600;
    cursor:pointer; transition:opacity .15s;
}
.btn-header-login:hover { opacity:0.85; }

/* ── HERO ── */
.hero {
    padding: 160px 24px 80px;
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
}
.hero-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,0.06); border: 1px solid var(--border);
    border-radius: 100px; padding: 5px 14px; margin-bottom: 32px;
    font-size: 13px; color: var(--text-muted); letter-spacing: 0.3px;
}
.hero-badge-dot { width:6px; height:6px; border-radius:50%; background:#4ade80; flex-shrink:0; }
.hero-title {
    font-size: clamp(40px, 7vw, 68px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -2px;
    color: #fff;
    margin-bottom: 20px;
}
.hero-title em {
    font-style: normal;
    background: linear-gradient(135deg, #c8b8ff 0%, #7eb8ff 50%, #a8f0c8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.hero-sub {
    font-size: 17px; color: var(--text-muted); line-height: 1.7;
    margin-bottom: 40px; max-width: 480px; margin-left:auto; margin-right:auto;
}
.hero-cta { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; }
.btn-cta-primary {
    padding: 13px 32px; background: #fff; color: #0e0e0e;
    border:none; border-radius:100px; font-size:15px; font-weight:700;
    cursor:pointer; transition: opacity .15s, transform .15s;
}
.btn-cta-primary:hover { opacity:0.9; transform:translateY(-1px); }
.btn-cta-ghost {
    padding: 13px 28px; background: transparent;
    border: 1px solid var(--border); border-radius:100px;
    font-size:15px; color:var(--text-muted); cursor:pointer;
    transition: border-color .15s, color .15s;
}
.btn-cta-ghost:hover { border-color:rgba(255,255,255,0.25); color:#fff; }

/* ── DEMO WINDOW ── */
.demo-wrap {
    max-width: 900px; margin: 0 auto 80px;
    padding: 0 24px;
}
.demo-window {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 20px; overflow: hidden;
    box-shadow: 0 40px 80px rgba(0,0,0,0.6);
}
.demo-bar {
    display:flex; align-items:center; gap:8px;
    padding: 14px 20px; border-bottom: 1px solid var(--border);
    background: #111;
}
.demo-dot { width:10px; height:10px; border-radius:50%; }
.demo-dot.red { background:#ff5f57; }
.demo-dot.yellow { background:#febc2e; }
.demo-dot.green { background:#28c840; }
.demo-title { flex:1; text-align:center; font-size:12px; color:var(--text-muted); letter-spacing:0.3px; }
.demo-body {
    display:grid; grid-template-columns:1fr 1fr;
    gap:0; min-height:280px;
}
.demo-panel {
    padding: 28px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center;
}
.demo-panel + .demo-panel { border-left:1px solid var(--border); }
.demo-panel-label {
    font-size:11px; color:var(--text-muted); text-transform:uppercase;
    letter-spacing:1px; margin-bottom:12px;
}
.demo-img-placeholder {
    width:100%; aspect-ratio:4/3; border-radius:10px;
    background: linear-gradient(135deg, #1e1e2e 0%, #2a2040 100%);
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--border);
}
.demo-img-placeholder svg { opacity:0.2; }

/* ── FEATURES ── */
.features {
    max-width:900px; margin:0 auto 100px;
    padding: 0 24px;
}
.features-label {
    text-align:center; font-size:12px; color:var(--text-muted);
    text-transform:uppercase; letter-spacing:2px; margin-bottom:16px;
}
.features-title {
    text-align:center; font-size:clamp(28px,4vw,42px); font-weight:800;
    line-height:1.15; letter-spacing:-1px; color:#fff; margin-bottom:56px;
}
.features-grid {
    display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.feature-card {
    background:var(--bg-card2); border:1px solid var(--border);
    border-radius:var(--radius); padding:28px 24px;
    transition: border-color .2s, transform .2s;
}
.feature-card:hover { border-color:rgba(255,255,255,0.18); transform:translateY(-2px); }
.feature-icon {
    width:40px; height:40px; border-radius:10px;
    background:rgba(255,255,255,0.06); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    font-size:18px; margin-bottom:16px;
}
.feature-name { font-size:15px; font-weight:700; color:#fff; margin-bottom:8px; }
.feature-desc { font-size:13px; color:var(--text-muted); line-height:1.65; }

/* ── TOOL SECTION ── */
.tool-section {
    max-width:900px; margin:0 auto 100px;
    padding:0 24px;
    text-align:center;
}
.section-label {
    font-size:12px; color:var(--text-muted); text-transform:uppercase;
    letter-spacing:2px; margin-bottom:12px;
}
.section-title {
    font-size:clamp(26px,3.5vw,38px); font-weight:800;
    letter-spacing:-0.8px; color:#fff; margin-bottom:8px;
}
.section-sub { font-size:14px; color:var(--text-muted); margin-bottom:32px; }
.tool-card {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius); padding:32px;
}

/* ── UPLOAD ── */
.upload-area {
    border:2px dashed rgba(255,255,255,0.12); border-radius:12px;
    padding:64px 20px; text-align:center; cursor:pointer;
    transition: border-color .2s, background .2s;
}
.upload-area:hover { border-color:rgba(255,255,255,0.3); background:rgba(255,255,255,0.03); }
.upload-icon { margin-bottom:16px; opacity:0.4; }
.upload-text { font-weight:600; font-size:17px; color:#fff; margin-bottom:6px; }
.upload-hint { font-size:13px; color:var(--text-muted); }

/* ── WORKSPACE ── */
.workspace { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:0; }
.preview-workspace { align-items:start; }
.result-workspace { align-items:end; }
h3 { font-size:13px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:12px; }
.img-container {
    width:100%; aspect-ratio:4/3; background:#111;
    border-radius:10px; overflow:hidden; display:flex; align-items:center; justify-content:center;
    border:1px solid var(--border); position:relative;
}
.img-container img { max-width:100%; max-height:100%; object-fit:contain; display:block; }

/* ── SLIDERS ── */
.slider-block { margin-bottom:20px; }
.second-slider { margin-top:4px; }
.slider-block label { display:block; font-size:13px; font-weight:600; color:var(--text-muted); margin-bottom:10px; }
.slider-block input[type="range"] { width:100%; accent-color:#7eb8ff; }
.slider-meta { display:flex; align-items:center; justify-content:space-between; margin-top:6px; color:var(--text-muted); font-size:12px; }
.slider-meta strong { color:#fff; font-size:13px; }
.control-desc { font-size:12px; color:var(--text-muted); margin:4px 0 20px; }

/* ── BUTTONS ── */
.btn { display:inline-block; width:100%; padding:13px 24px; border-radius:10px; font-size:15px; font-weight:600; text-align:center; cursor:pointer; border:none; transition:all .2s; text-decoration:none; }
.primary-btn { background:#fff; color:#0e0e0e; }
.primary-btn:hover { opacity:0.88; }
.outline-btn { background:transparent; color:var(--text-muted); border:1px solid var(--border); }
.outline-btn:hover { border-color:rgba(255,255,255,0.25); color:#fff; }
.disabled { opacity:.35; pointer-events:none; }
.hidden { display:none !important; }

/* ── ACTION PANEL ── */
.action-panel.bottom-align { display:flex; flex-direction:column; justify-content:flex-end; height:100%; gap:16px; }
.result-status { display:flex; align-items:center; justify-content:center; color:#4ade80; font-weight:600; font-size:15px; text-align:center; width:100%; min-height:24px; }

/* ── LOADER ── */
.loader {
    width:40px; height:40px;
    border:4px solid rgba(255,255,255,0.08);
    border-bottom-color:#7eb8ff;
    border-radius:50%;
    animation:rotation 1s linear infinite;
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
}
@keyframes rotation { 0%{transform:translate(-50%,-50%) rotate(0deg)} 100%{transform:translate(-50%,-50%) rotate(360deg)} }

/* ── FOOTER ── */
.footer {
    text-align:center; padding:40px 24px;
    border-top:1px solid var(--border);
    color:var(--text-muted); font-size:13px;
}

/* ── MODAL ── */
.modal-overlay {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,0.7); z-index:1000; backdrop-filter:blur(6px);
    align-items:center; justify-content:center;
}
.modal-overlay.show { display:flex; }
.modal {
    background:#1a1a1a; border:1px solid var(--border);
    border-radius:20px; box-shadow:0 24px 60px rgba(0,0,0,0.5);
    padding:36px 32px 28px; width:100%; max-width:380px;
    position:relative; animation:modalIn .2s ease;
}
@keyframes modalIn { from{transform:scale(.94);opacity:0} to{transform:scale(1);opacity:1} }
.modal-close {
    position:absolute; top:14px; right:16px;
    background:none; border:none; font-size:20px; color:var(--text-muted);
    cursor:pointer; line-height:1; padding:4px;
}
.modal-close:hover { color:#fff; }
.modal-logo { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.modal-logo span { font-size:15px; font-weight:700; color:#fff; }
.modal-title { font-size:20px; font-weight:800; color:#fff; margin:0 0 4px; letter-spacing:-0.5px; }
.modal-sub { font-size:13px; color:var(--text-muted); margin:0 0 22px; }
.modal-tabs { display:flex; margin-bottom:20px; border-bottom:1px solid var(--border); }
.modal-tab { flex:1; text-align:center; padding:9px 0; font-size:14px; font-weight:600; color:var(--text-muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .15s,border-color .15s; }
.modal-tab.active { color:#fff; border-bottom-color:#fff; }
.modal-form-group { margin-bottom:14px; }
.modal-form-group label { display:block; font-size:12px; font-weight:600; color:var(--text-muted); margin-bottom:5px; }
.modal-form-group input {
    width:100%; padding:10px 13px;
    background:#0e0e0e; border:1px solid var(--border); border-radius:9px;
    font-size:14px; color:#fff; outline:none; box-sizing:border-box;
    transition:border-color .15s;
}
.modal-form-group input:focus { border-color:rgba(255,255,255,0.3); }
.modal-submit { width:100%; padding:11px; background:#fff; color:#0e0e0e; border:none; border-radius:9px; font-size:14px; font-weight:700; cursor:pointer; margin-top:4px; transition:opacity .15s; }
.modal-submit:hover { opacity:0.88; }
.modal-submit:disabled { opacity:0.3; cursor:not-allowed; }
.modal-msg { margin-top:12px; font-size:12px; text-align:center; min-height:18px; }
.modal-msg.error { color:#f87171; }
.modal-msg.success { color:#4ade80; }

.btn-sponsor {
    padding:7px 16px; background:linear-gradient(135deg,#ff6b9d,#f97316);
    color:#fff; border:none; border-radius:8px; font-size:13px; font-weight:600;
    cursor:pointer; transition:opacity .15s; margin-right:8px;
}
.btn-sponsor:hover { opacity:0.85; }

.amount-btn {
    flex:1; min-width:60px; padding:9px 0;
    background:rgba(255,255,255,0.06); border:1px solid var(--border);
    border-radius:9px; font-size:14px; font-weight:600; color:var(--text-muted);
    cursor:pointer; transition:all .15s;
}
.amount-btn:hover { border-color:rgba(255,255,255,0.2); color:#fff; }
.amount-btn.active { background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.4); color:#fff; }

/* ── USER AVATAR & MENU ── */
.user-avatar {
    width:32px; height:32px; border-radius:50%;
    background:linear-gradient(135deg,#7eb8ff,#c8b8ff);
    display:flex; align-items:center; justify-content:center;
    font-size:13px; font-weight:700; color:#0e0e0e;
    cursor:pointer; user-select:none;
    transition:opacity .15s;
}
.user-avatar:hover { opacity:0.85; }

.user-menu {
    display:none; position:absolute; top:44px; right:0;
    background:#1e1e1e; border:1px solid var(--border);
    border-radius:14px; padding:16px;
    min-width:220px; z-index:200;
    box-shadow:0 16px 40px rgba(0,0,0,0.4);
    animation:modalIn .15s ease;
}
.user-menu.show { display:block; }

.user-menu-top {
    display:flex; align-items:center; gap:12px;
    padding-bottom:14px; margin-bottom:12px;
    border-bottom:1px solid var(--border);
}
.user-menu-avatar-lg {
    width:40px; height:40px; border-radius:50%; flex-shrink:0;
    background:linear-gradient(135deg,#7eb8ff,#c8b8ff);
    display:flex; align-items:center; justify-content:center;
    font-size:16px; font-weight:700; color:#0e0e0e;
}
.user-menu-name { font-size:14px; font-weight:600; color:#fff; margin-bottom:2px; }
.user-menu-email { font-size:12px; color:var(--text-muted); word-break:break-all; }
.user-menu-logout {
    width:100%; padding:9px; background:rgba(255,80,80,0.08);
    border:1px solid rgba(255,80,80,0.2); border-radius:8px;
    font-size:13px; font-weight:600; color:#f87171;
    cursor:pointer; transition:background .15s;
}
.user-menu-logout:hover { background:rgba(255,80,80,0.15); }

/* ── VERSION ── */
.version-inline { display:none; }

/* ── RESPONSIVE ── */
@media (max-width:768px) {
    .nav { padding:0 20px; }
    .features-grid { grid-template-columns:1fr; }
    .workspace { grid-template-columns:1fr; }
    .demo-body { grid-template-columns:1fr; }
    .demo-panel + .demo-panel { border-left:none; border-top:1px solid var(--border); }
    .action-panel.bottom-align { gap:12px; }
}