/* ============================================================
           ESTILOS COMPLETOS
           ============================================================ */
        @font-face { font-family:'Raleway'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/raleway-latin-700-normal.woff2') format('woff2'); }
        @font-face { font-family:'Raleway'; font-style:normal; font-weight:800; font-display:swap; src:url('/fonts/raleway-latin-800-normal.woff2') format('woff2'); }
        @font-face { font-family:'Raleway'; font-style:normal; font-weight:900; font-display:swap; src:url('/fonts/raleway-latin-900-normal.woff2') format('woff2'); }
        @font-face { font-family:'Nunito'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/nunito-latin-400-normal.woff2') format('woff2'); }
        @font-face { font-family:'Nunito'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/nunito-latin-600-normal.woff2') format('woff2'); }
        @font-face { font-family:'Nunito'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/nunito-latin-700-normal.woff2') format('woff2'); }
        @font-face { font-family:'Nunito'; font-style:normal; font-weight:800; font-display:swap; src:url('/fonts/nunito-latin-800-normal.woff2') format('woff2'); }
        /* — Fuentes opcionales para el chat (autoalojadas en /fonts/) — */
        @font-face { font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/poppins-latin-400-normal.woff2') format('woff2'); }
        @font-face { font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/poppins-latin-700-normal.woff2') format('woff2'); }
        @font-face { font-family:'Alegreya'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/alegreya-latin-400-normal.woff2') format('woff2'); }
        @font-face { font-family:'Alegreya'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/alegreya-latin-700-normal.woff2') format('woff2'); }
        @font-face { font-family:'Lora'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/lora-latin-400-normal.woff2') format('woff2'); }
        @font-face { font-family:'Lora'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/lora-latin-700-normal.woff2') format('woff2'); }
        @font-face { font-family:'Source Serif Pro'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/source-serif-pro-latin-400-normal.woff2') format('woff2'); }
        @font-face { font-family:'Source Serif Pro'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/source-serif-pro-latin-700-normal.woff2') format('woff2'); }
        @font-face { font-family:'Cooper'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/cooper-latin-400-normal.woff2') format('woff2'); }
        @font-face { font-family:'Cooper'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/cooper-latin-700-normal.woff2') format('woff2'); }
        @font-face { font-family:'Tinos'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/tinos-latin-400-normal.woff2') format('woff2'); }
        @font-face { font-family:'Tinos'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/tinos-latin-700-normal.woff2') format('woff2'); }
        @font-face { font-family:'Old Standard TT'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/old-standard-tt-latin-400-normal.woff2') format('woff2'); }
        @font-face { font-family:'Old Standard TT'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/old-standard-tt-latin-700-normal.woff2') format('woff2'); }
        @font-face { font-family:'Fabrik'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/fabrik-latin-400-normal.woff2') format('woff2'); }
        @font-face { font-family:'Trujillo'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/trujillo-latin-400-normal.woff2') format('woff2'); }
        @font-face { font-family:'Nimbus Roman'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/nimbus-roman-latin-400-normal.woff2') format('woff2'); }
        @font-face { font-family:'Nimbus Roman'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/nimbus-roman-latin-700-normal.woff2') format('woff2'); }
        @font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/inter-latin-400-normal.woff2') format('woff2'); }
        @font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/inter-latin-700-normal.woff2') format('woff2'); }
        @font-face { font-family:'Fredoka'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/fredoka-latin-400-normal.woff2') format('woff2'); }
        @font-face { font-family:'Sans Francais'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/sans-francais-latin-400-normal.woff2') format('woff2'); }
        @font-face { font-family:'Kelvinch'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/kelvinch-latin-400-normal.woff2') format('woff2'); }
        @font-face { font-family:'Kelvinch'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/kelvinch-latin-700-normal.woff2') format('woff2'); }

        :root {
            --bg: #07070a;
            --surface: #0e0c14;
            --surface2: #141020;
            --border: #201a2e;
            --border2: #2e2440;
            --accent: #e8853d;
            --accent2: #d45e22;
            --accent3: #f7c340;
            --text: #f0f0f4;
            --text2: #9898a8;
            --text3: #5a5a6a;
            --card: #0a0914;
            --success: #4dffb4;
            --danger: #ff4d4d;
            --warning: #ffb84d;
        }

        * { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
        html, body { height:100%; overflow:hidden; }
        body {
            background:var(--bg);
            color:var(--text);
            font-family:'Nunito', sans-serif;
            display:flex; flex-direction:column;
            height:100vh;
            height:100dvh;
            position:relative;
            padding-bottom: env(safe-area-inset-bottom, 0px);
        }
        body::after {
            content:''; position:fixed; inset:0;
            background: radial-gradient(ellipse 70% 50% at 15% 0%,rgba(255,77,141,0.07) 0%,transparent 60%),
                        radial-gradient(ellipse 50% 70% at 85% 100%,rgba(178,77,255,0.06) 0%,transparent 60%);
            pointer-events:none; z-index:0;
        }

        /* ---------- SCROLLBAR ---------- */
        ::-webkit-scrollbar { width:3px; }
        ::-webkit-scrollbar-track { background:transparent; }
        ::-webkit-scrollbar-thumb { background:var(--border2); border-radius:2px; }

        /* ---------- WELCOME SCREEN (CORREGIDO) ---------- */
        #welcome-screen {
            position:fixed; inset:0; z-index:900; background:var(--bg);
            display:flex; flex-direction:column; align-items:center; 
            justify-content:flex-start;
            padding:50px 24px 140px 24px; text-align:center;
            overflow-y:auto;
        }
        .welcome-particles { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
        .particle {
            position:absolute; width:2px; height:2px; border-radius:50%;
            animation:float linear infinite; opacity:0;
        }
        @keyframes float {
            0% { transform:translateY(100vh) scale(0); opacity:0; }
            10% { opacity:1; }
            90% { opacity:1; }
            100% { transform:translateY(-10vh) scale(1.5); opacity:0; }
        }
        .welcome-logo-wrap { position:relative; margin-bottom:24px; animation:logoIn 0.8s cubic-bezier(0.34,1.56,0.64,1) both; }
        @keyframes logoIn { from { opacity:0; transform:scale(0.5); } to { opacity:1; transform:scale(1); } }
        .welcome-logo-ring {
            width:100px; height:100px; border-radius:50%;
            background:conic-gradient(var(--accent),var(--accent2),var(--accent3),var(--accent));
            display:flex; align-items:center; justify-content:center;
            animation:spin 8s linear infinite; position:relative;
        }
        @keyframes spin { to { transform:rotate(360deg); } }
        .welcome-logo-inner {
            width:86px; height:86px; border-radius:50%; background:var(--bg);
            display:flex; align-items:center; justify-content:center;
            font-family:'Raleway',sans-serif; font-size:26px; font-weight:900;
            background:linear-gradient(135deg,var(--accent),var(--accent2));
            -webkit-background-clip:text; -webkit-text-fill-color:transparent;
            position:relative; z-index:1;
        }
        .welcome-logo-glow {
            position:absolute; inset:-8px; border-radius:50%;
            background:conic-gradient(var(--accent),var(--accent2),var(--accent3),var(--accent));
            filter:blur(16px); opacity:0.4; animation:spin 8s linear infinite;
        }
        .welcome-title { font-family:'Raleway',sans-serif; font-size:32px; font-weight:900; line-height:1.1; margin-bottom:10px; animation:fadeUp 0.6s 0.3s ease both; }
        .welcome-title span { background:linear-gradient(135deg,var(--accent),var(--accent2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
        .welcome-sub { font-size:15px; color:var(--text2); line-height:1.5; max-width:300px; margin:0 auto 30px; animation:fadeUp 0.6s 0.45s ease both; }
        @keyframes fadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
        .welcome-features { display:flex; flex-direction:column; gap:8px; width:100%; max-width:300px; margin-bottom:30px; animation:fadeUp 0.6s 0.6s ease both; }
        .wfeat { display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:10px 14px; font-size:14px; }
        .wfeat-icon { font-size:20px; flex-shrink:0; }
        .wfeat-text { color:var(--text2); text-align:left; }
        .wfeat-text strong { color:var(--text); display:block; font-size:13px; }
        .welcome-cta { 
            width:100%; max-width:300px; animation:fadeUp 0.6s 0.75s ease both;
            padding-bottom: 40px;
        }
        .btn-welcome { 
            width:100%; padding:15px; border-radius:14px; border:none; 
            background:linear-gradient(135deg,var(--accent),var(--accent2)); 
            color:#fff; font-family:'Raleway',sans-serif; font-size:17px; font-weight:800; 
            cursor:pointer; letter-spacing:0.03em; transition:all 0.2s; 
            box-shadow:0 8px 32px rgba(255,77,141,0.35); margin-bottom:10px; 
        }
        .btn-welcome:active { transform:scale(0.97); }
        .btn-signin { 
            width:100%; padding:13px; border-radius:14px; background:transparent; 
            border:1px solid var(--border2); color:var(--text2); 
            font-family:'Nunito',sans-serif; font-size:15px; font-weight:700; 
            cursor:pointer; transition:all 0.2s; 
        }
        .btn-signin:active { border-color:var(--accent); color:var(--accent); }

        /* ---------- MAIN APP ---------- */
        #app { flex:1; display:flex; flex-direction:column; overflow:hidden; position:relative; z-index:1; }
        #topbar { display:flex; align-items:center; gap:10px; padding:10px 16px; background:rgba(7,7,15,0.92); backdrop-filter:blur(16px); border-bottom:1px solid var(--border); flex-shrink:0; position:relative; z-index:10; overflow:visible; }
        .topbar-logo { font-family:'Raleway',sans-serif; font-size:22px; font-weight:900; background:linear-gradient(135deg,var(--accent),var(--accent2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; flex-shrink:0; cursor:pointer; }
        .topbar-search { flex:1; min-width:0; display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:8px 12px; }
        .topbar-search input { flex:1; background:none; border:none; outline:none; color:var(--text); font-family:'Nunito',sans-serif; font-size:14px; }
        .topbar-search input::placeholder { color:var(--text3); }
        .topbar-avatar { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent2)); display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:800; cursor:pointer; border:2px solid transparent; transition:border-color 0.2s; flex-shrink:0; font-family:"Raleway",sans-serif; color:#fff; }
        .topbar-avatar:active { border-color:var(--accent); }

        #pages { flex:1; overflow:hidden; position:relative; }
        .page { position:absolute; inset:0; overflow-y:auto; display:none; padding-bottom:70px; }
        .page.active { display:block; }

        #bottomnav { display:flex; background:rgba(7,7,15,0.97); border-top:1px solid var(--border); flex-shrink:0; position:relative; z-index:10; padding-bottom:env(safe-area-inset-bottom); }
        .bnav { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:8px 4px; background:none; border:none; color:var(--text3); font-family:'Nunito',sans-serif; font-size:10px; font-weight:700; cursor:pointer; transition:all 0.2s; }
        .bnav.active { color:var(--accent); }
        .bnav .bi { width:22px; height:22px; transition:transform 0.2s; }
        .bnav.active .bi { transform:scale(1.1); }

        /* EXPLORE PAGE */
        .hero-banner { position:relative; height:200px; overflow:hidden; cursor:pointer; }
        .hero-bg { position:absolute; inset:0; background:linear-gradient(135deg,#1a0033,#330017,#001a33); background-size:cover; background-position:center; transition:transform 0.3s; }
        .hero-banner:active .hero-bg { transform:scale(1.03); }
        .hero-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(7,7,15,1) 0%,rgba(7,7,15,0.3) 60%,transparent 100%); }
        .hero-content { position:absolute; bottom:0; left:0; right:0; padding:20px 16px; }
        .hero-tag { display:inline-flex; align-items:center; gap:4px; background:var(--accent); color:#fff; font-size:10px; font-weight:800; padding:3px 8px; border-radius:6px; margin-bottom:6px; letter-spacing:0.05em; text-transform:uppercase; }
        .hero-name { font-family:'Raleway',sans-serif; font-size:26px; font-weight:900; margin-bottom:4px; }
        .hero-desc { font-size:13px; color:rgba(242,242,255,0.7); line-height:1.4; }
        .section-head { display:flex; align-items:center; justify-content:space-between; padding:16px 16px 10px; }
        .section-head-title { font-family:'Raleway',sans-serif; font-size:17px; font-weight:800; }
        .cats { display:flex; gap:8px; overflow-x:auto; padding:0 16px 12px; scrollbar-width:none; scroll-behavior:smooth; }
        .cats::-webkit-scrollbar { display:none; }
        .cats-wrap { position:relative; }
        .cats-arrow { display:none; }
        @media (hover:hover) {
            .cats-arrow { display:flex; position:absolute; top:0; bottom:12px; width:36px; align-items:center; justify-content:center; background:linear-gradient(to right,var(--bg) 60%,transparent); border:none; color:var(--text2); font-size:16px; cursor:pointer; z-index:2; padding:0; transition:color 0.2s; }
            .cats-arrow:hover { color:var(--accent); }
            .cats-arrow.right { right:0; background:linear-gradient(to left,var(--bg) 60%,transparent); }
            .cats-arrow.left { left:0; }
        }
        .cat { flex-shrink:0; padding:7px 16px; border-radius:20px; border:1px solid var(--border2); background:transparent; color:var(--text2); font-family:'Nunito',sans-serif; font-size:12px; font-weight:700; cursor:pointer; transition:all 0.2s; white-space:nowrap; }
        .cat.on, .cat:active { background:var(--accent); border-color:var(--accent); color:#fff; }
        .bot-row { display:flex; gap:10px; overflow-x:auto; padding:0 16px 4px; scrollbar-width:none; }
        .bot-row::-webkit-scrollbar { display:none; }
        .bot-card-h { flex-shrink:0; width:130px; background:var(--card); border:1px solid var(--border); border-radius:14px; overflow:hidden; cursor:pointer; transition:all 0.2s; }
        .card-report { position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:8px; background:rgba(7,7,15,0.55); backdrop-filter:blur(4px); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2; opacity:0.55; transition:opacity .15s, background .15s; }
        .card-report:active { opacity:1; background:rgba(255,77,141,0.35); }
        .card-report svg { width:14px; height:14px; stroke:#fff; }
        .bot-card-h:active { border-color:var(--accent); transform:translateY(-3px); }
        .bch-img { width:100%; height:130px; background:linear-gradient(135deg,var(--surface2),var(--border2)); display:flex; align-items:center; justify-content:center; font-size:52px; position:relative; overflow:hidden; }
        .bch-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
        .bch-img.no-img { background:var(--surface2); }
        .bch-fav { position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:50%; background:rgba(7,7,15,0.7); backdrop-filter:blur(4px); border:none; display:flex; align-items:center; justify-content:center; font-size:13px; cursor:pointer; }
        .bch-fav:active { background:var(--accent); }
        .bch-body { padding:8px 10px 10px; }
        .bch-name { font-size:13px; font-weight:800; margin-bottom:2px; }
        .bch-desc { font-size:11px; color:var(--text2); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
        .bch-sub { font-size:11px; color:var(--text3); }
        .bot-grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; padding:0 16px; }
        .bot-card-v { background:var(--card); border:1px solid var(--border); border-radius:14px; overflow:hidden; cursor:pointer; transition:all 0.2s; }
        .bot-card-v:active { border-color:var(--accent); }
        .bcv-img { width:100%; aspect-ratio:1; background:linear-gradient(135deg,var(--surface2),var(--border2)); display:flex; align-items:center; justify-content:center; font-size:56px; position:relative; overflow:hidden; }
        .bcv-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
        .bcv-img.no-img { background:var(--surface2); }
        .bcv-body { padding:8px 10px 10px; }
        .bcv-name { font-size:14px; font-weight:800; margin-bottom:2px; }
        .bcv-desc { font-size:11px; color:var(--text2); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

        .btn-google { width:100%; padding:12px; background:#fff; color:#3c4043; border:1px solid #dadce0; border-radius:12px; font-weight:700; font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; margin-top:8px; transition:box-shadow 0.2s; font-family:'Nunito',sans-serif; }
        .btn-google:hover { box-shadow:0 2px 8px rgba(0,0,0,0.2); }
        .btn-google svg { flex-shrink:0; }
        .or-divider { display:flex; align-items:center; gap:10px; margin:12px 0; color:var(--text3); font-size:12px; }
        .or-divider::before, .or-divider::after { content:''; flex:1; height:1px; background:var(--border2); }
        /* Adult mode */
        .am-warning { background:rgba(255,77,77,0.1); border:1px solid rgba(255,77,77,0.3); border-radius:12px; padding:12px; font-size:13px; color:#ff9999; margin-bottom:14px; line-height:1.5; }
        .am-year-row { display:flex; gap:8px; margin-bottom:14px; }
        .am-accept-row { display:flex; gap:10px; align-items:flex-start; padding:12px; background:var(--bg); border:1px solid var(--border2); border-radius:10px; margin-bottom:14px; cursor:pointer; }
        .am-accept-row input { margin-top:2px; flex-shrink:0; accent-color:var(--accent); width:16px; height:16px; cursor:pointer; }
        .am-accept-row span { font-size:13px; color:var(--text2); line-height:1.5; }
        .img-upload-area { width:100%; height:150px; border:2px dashed var(--border2); border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; cursor:pointer; position:relative; overflow:hidden; margin-bottom:12px; transition:border-color 0.2s; background:var(--bg); }
        .img-upload-area:hover { border-color:var(--accent); }
        .img-upload-area img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:12px; }
        .img-upload-icon { font-size:30px; pointer-events:none; position:relative; z-index:1; }
        .img-upload-label { font-size:12px; color:var(--text3); pointer-events:none; position:relative; z-index:1; }
        .fi-select { width:100%; padding:12px 14px; background:var(--bg); border:1px solid var(--border2); border-radius:10px; color:var(--text); font-size:14px; outline:none; margin-bottom:10px; font-family:'Nunito',sans-serif; appearance:none; }
        .fi-select option { background:var(--surface2); }
        .fi-ta { width:100%; background:var(--bg); border:1px solid var(--border2); border-radius:10px; padding:12px 14px; color:var(--text); font-size:14px; outline:none; margin-bottom:10px; min-height:72px; resize:vertical; font-family:'Nunito',sans-serif; }
        .fi-ta:focus, .fi-select:focus { border-color:var(--accent); }
        .fab-create { position:fixed; bottom:82px; right:16px; width:50px; height:50px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent2)); border:none; color:#fff; font-size:22px; cursor:pointer; box-shadow:0 4px 20px rgba(255,77,141,0.45); z-index:50; display:none; align-items:center; justify-content:center; transition:transform 0.2s; }
        .fab-create.visible { display:flex; }
        .fab-create:active { transform:scale(0.9); }

        /* CHAT PROFILE DROPDOWN */
        #cv-profile-drop { position:absolute; top:100%; left:0; right:0; background:var(--surface); border-bottom:1px solid var(--border); padding:16px; z-index:5; transform:translateY(-8px); opacity:0; pointer-events:none; transition:transform 0.22s ease, opacity 0.22s ease; display:flex; gap:14px; align-items:center; }
        #cv-profile-drop.open { transform:translateY(0); opacity:1; pointer-events:all; }
        .cpd-av { width:56px; height:56px; border-radius:14px; background:linear-gradient(135deg,var(--accent2),var(--accent)); display:flex; align-items:center; justify-content:center; font-size:28px; flex-shrink:0; overflow:hidden; }
        .cpd-av img { width:100%; height:100%; object-fit:cover; }
        .cpd-info { flex:1; min-width:0; }
        .cpd-name { font-family:'Raleway',sans-serif; font-weight:900; font-size:16px; }
        .cpd-creator { font-size:12px; color:var(--text3); margin-top:2px; }
        .cpd-desc { font-size:12px; color:var(--text2); margin-top:4px; line-height:1.4; }
        .cpd-fav { width:40px; height:40px; border-radius:12px; background:var(--surface2); border:1px solid var(--border2); font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background 0.15s; }
        .cpd-fav:active { background:rgba(255,77,141,0.2); }
        #generalsettings-overlay { position:fixed; inset:0; background:var(--bg); z-index:2100; transform:translateX(100%); transition:transform 0.3s cubic-bezier(0.4,0,0.2,1); display:flex; flex-direction:column; }
        #generalsettings-overlay.open { transform:translateX(0); }
        .gs-header { display:flex; align-items:center; gap:12px; padding:16px; border-bottom:1px solid var(--border); flex-shrink:0; }
        .gs-title { font-family:'Raleway',sans-serif; font-weight:900; font-size:18px; }
        .gs-section-label { font-size:11px; font-weight:800; color:var(--text3); text-transform:uppercase; letter-spacing:0.08em; padding:20px 16px 8px; }
        .theme-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:8px 16px 16px; }
        .theme-card { border-radius:12px; padding:10px 8px; border:2px solid var(--border2); cursor:pointer; text-align:center; transition:all .15s; }
        .theme-card.sel { border-color:var(--accent); background:rgba(255,255,255,0.04); }
        .theme-card-bar { height:30px; border-radius:8px; margin-bottom:6px; }
        .theme-card-name { font-size:11px; font-weight:700; color:var(--text2); }
        .theme-card.sel .theme-card-name { color:var(--text); }
        .theme-card-check { font-size:10px; color:var(--accent); margin-top:2px; font-weight:800; }
        .gs-item { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; gap:16px; }
        .gs-item-text { flex:1; }
        .gs-item-title { font-size:14px; font-weight:700; margin-bottom:2px; }
        .gs-item-sub { font-size:12px; color:var(--text3); line-height:1.4; }
        /* Toggle switch */
        .toggle { position:relative; width:48px; height:27px; flex-shrink:0; }
        .toggle input { opacity:0; width:0; height:0; position:absolute; }
        .toggle-track { position:absolute; inset:0; background:var(--border2); border-radius:27px; cursor:pointer; transition:background 0.2s; }
        .toggle input:checked + .toggle-track { background:var(--accent); }
        .toggle-track::after { content:''; position:absolute; width:21px; height:21px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform 0.2s; }
        .toggle input:checked + .toggle-track::after { transform:translateX(21px); }
        #settings-drawer { position:fixed; top:0; right:-100%; width:min(320px,90vw); height:100%; background:var(--surface); z-index:2000; transition:right 0.3s cubic-bezier(0.4,0,0.2,1); box-shadow:-4px 0 30px rgba(0,0,0,0.5); display:flex; flex-direction:column; }
        #settings-drawer.open { right:0; }
        #settings-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0); z-index:1999; pointer-events:none; transition:background 0.3s; }
        #settings-backdrop.open { background:rgba(0,0,0,0.6); pointer-events:all; }
        .drawer-header { padding:20px 16px 14px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
        .drawer-title { font-family:'Raleway',sans-serif; font-weight:900; font-size:18px; }
        .drawer-close { background:var(--surface2); border:none; color:var(--text2); width:32px; height:32px; border-radius:8px; cursor:pointer; font-size:18px; }
        .drawer-menu { padding:8px; flex:1; overflow-y:auto; }
        .drawer-item { display:flex; align-items:center; gap:14px; padding:14px 12px; border-radius:12px; cursor:pointer; transition:background 0.15s; border:none; background:none; width:100%; text-align:left; color:var(--text); font-family:'Nunito',sans-serif; font-size:14px; font-weight:700; }
        .drawer-item:hover { background:var(--surface2); }
        .drawer-item-icon { width:36px; height:36px; border-radius:10px; background:var(--surface2); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
        .drawer-item-sub { font-size:11px; color:var(--text3); font-weight:400; margin-top:1px; }
        .drawer-divider { height:1px; background:var(--border); margin:6px 12px; }
        .drawer-item.premium .drawer-item-icon { background:linear-gradient(135deg,var(--accent),var(--accent2)); }
        .bnav-settings { width:44px; height:44px; background:none; border:none; color:var(--text3); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:color 0.2s; flex-shrink:0; padding:0 8px; }
        #bgcrop-overlay { position:fixed; inset:0; background:var(--bg); z-index:1100; display:flex; flex-direction:column; }
        #bgcrop-overlay.hidden { display:none; }
        .crop-header { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border); flex-shrink:0; }
        .crop-header span { font-weight:800; font-size:15px; }
        .crop-header button { padding:8px 18px; border-radius:10px; border:none; font-weight:800; font-size:13px; cursor:pointer; }
        .crop-cancel { background:var(--surface2); color:var(--text2); }
        .crop-confirm { background:var(--accent); color:#fff; }
        #bgcrop-viewport { flex:1; overflow:hidden; position:relative; cursor:grab; user-select:none; touch-action:none; background:#000; }
        #bgcrop-viewport:active { cursor:grabbing; }
        #bgcrop-blur-bg { position:absolute; inset:-30px; background-size:cover; background-position:center; filter:blur(24px) brightness(0.35); z-index:0; }
        #bgcrop-img { position:absolute; top:0; left:0; transform-origin:0 0; will-change:transform; max-width:none; z-index:1; }
        .crop-handle { position:absolute; width:18px; height:18px; background:#fff; border-radius:3px; touch-action:none; }
        .crop-hint { padding:10px; text-align:center; font-size:12px; color:var(--text3); flex-shrink:0; }
        .bds-img { width:72px; height:72px; border-radius:16px; background:linear-gradient(135deg,var(--accent2),var(--accent)); display:flex; align-items:center; justify-content:center; font-size:36px; overflow:hidden; flex-shrink:0; }
        .bds-img img { width:100%; height:100%; object-fit:cover; }
        .bds-img.no-img { display:none; }

        /* CHATS */
        #chats-page { padding:0 0 70px; }
        .chats-header { padding:20px 16px 12px; font-family:'Raleway',sans-serif; font-size:24px; font-weight:900; }
        .chat-item { display:flex; align-items:center; gap:12px; padding:12px 16px; cursor:pointer; }
        .chat-item:active { background:var(--surface); }
        .ci-av { width:50px; height:50px; border-radius:14px; background:linear-gradient(135deg,var(--accent2),var(--accent)); display:flex; align-items:center; justify-content:center; font-size:26px; flex-shrink:0; overflow:hidden; position:relative; }
        .ci-av img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
        .ci-av.no-img { background:var(--surface2); }
        .ci-info { flex:1; min-width:0; }
        .ci-name { font-size:15px; font-weight:800; }
        .ci-preview { font-size:13px; color:var(--text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .ci-right { text-align:right; flex-shrink:0; }
        .ci-time { font-size:11px; color:var(--text3); }
        .report-reason { padding:12px 14px; border:1px solid var(--border2); border-radius:10px; font-size:13px; color:var(--text2); cursor:pointer; transition:all .15s; }
        .report-reason:active { background:var(--surface2); }
        .report-reason.sel { border-color:var(--accent); color:var(--text); background:rgba(255,77,141,0.08); }
        .empty-state { display:flex; flex-direction:column; align-items:center; text-align:center; padding:72px 36px; }
        .es-icon { width:64px; height:64px; border-radius:20px; background:var(--surface2); display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
        .es-icon svg { width:30px; height:30px; stroke:var(--text3); fill:none; stroke-width:1.6; }
        .es-title { font-family:'Raleway',sans-serif; font-size:19px; font-weight:900; margin-bottom:6px; color:var(--text); }
        .es-text { font-size:13px; color:var(--text2); line-height:1.5; max-width:240px; margin-bottom:22px; }
        .es-btn { background:linear-gradient(135deg,var(--accent),var(--accent2)); border:none; color:#fff; font-weight:800; font-size:14px; padding:11px 24px; border-radius:12px; cursor:pointer; }
        /* legacy empty-chats kept for compatibility */
        .empty-chats { text-align:center; padding:64px 32px; }
        .ec-icon { font-size:56px; margin-bottom:16px; }
        .ec-title { font-family:'Raleway',sans-serif; font-size:20px; font-weight:900; margin-bottom:8px; }
        .ec-sub { font-size:14px; color:var(--text2); line-height:1.6; margin-bottom:24px; }
        .btn-go-explore { padding:12px 28px; border-radius:12px; background:linear-gradient(135deg,var(--accent),var(--accent2)); border:none; color:#fff; font-size:14px; font-weight:800; cursor:pointer; }

        /* CHAT VIEW */
        #chat-view { position:fixed; inset:0; z-index:200; display:none; flex-direction:column; background:transparent; }
        #chat-view.open { display:flex; }
        .cv-header { display:flex; align-items:center; gap:10px; padding:10px max(14px, calc(14px + env(safe-area-inset-right))) 10px max(14px, calc(14px + env(safe-area-inset-left))); background:transparent; backdrop-filter:none; border-bottom:none; flex-shrink:0; transition:background 0.2s, border-color 0.2s; }
        .cv-header.transparent { background:transparent !important; backdrop-filter:none !important; border-bottom:none !important; padding:env(safe-area-inset-top) 0 0 0 !important; min-height:0 !important; height:env(safe-area-inset-top) !important; overflow:hidden !important; }
        .cv-header.transparent .cv-av,
        .cv-header.transparent .cv-info,
        .cv-header.transparent .cv-actions,
        .cv-header.transparent #cv-fav-btn { display:none !important; }
        .cv-header.transparent .cv-back { opacity:0; pointer-events:none; }
        /* CONTROLS DRAWER (swipe-left panel) */
        #cv-controls-drawer { position:absolute; top:0; right:-280px; width:260px; height:100%; background:rgba(7,7,15,0.96); backdrop-filter:blur(20px); z-index:300; transition:right 0.28s cubic-bezier(0.4,0,0.2,1); display:flex; flex-direction:column; padding:max(16px,calc(16px + env(safe-area-inset-top))) 16px 16px; border-left:1px solid var(--border); }
        #cv-controls-drawer.open { right:0; }
        #cv-controls-backdrop { position:absolute; inset:0; z-index:299; display:none; }
        #cv-controls-backdrop.open { display:block; }
        .ctrl-back-btn { display:flex; align-items:center; gap:10px; background:var(--surface); border:none; color:var(--text); padding:12px 14px; border-radius:12px; cursor:pointer; font-size:15px; font-weight:700; margin-bottom:16px; }
        .ctrl-bot-info { display:flex; align-items:center; gap:12px; padding:12px; background:var(--surface2); border-radius:12px; margin-bottom:12px; }
        .ctrl-bot-av { width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg,var(--accent2),var(--accent)); display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; overflow:hidden; }
        .ctrl-bot-av img { width:100%; height:100%; object-fit:cover; }
        .ctrl-bot-av.no-img { display:none; }
        .ctrl-bot-name { font-weight:800; font-size:15px; }
        .ctrl-bot-status { font-size:12px; color:var(--accent2); }
        .ctrl-actions { display:flex; gap:10px; }
        .ctrl-btn { flex:1; padding:12px; background:var(--surface); border:1px solid var(--border2); border-radius:12px; color:var(--text); font-size:20px; cursor:pointer; text-align:center; }
        .cv-back { width:36px; height:36px; border-radius:10px; background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text2); font-size:18px; }
        .cv-av { width:40px; height:40px; border-radius:12px; background:linear-gradient(135deg,var(--accent2),var(--accent)); display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; overflow:hidden; position:relative; }
        .cv-av img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
        .cv-av.no-img { display:none; }
        .cv-info { flex:1; min-width:0; }
        .cv-name { font-size:16px; font-weight:800; text-shadow:0 1px 6px rgba(0,0,0,0.7), 0 0 2px rgba(0,0,0,0.9); }
        .cv-status { font-size:11px; color:var(--success); display:flex; align-items:center; gap:4px; }
        .cv-dot { width:5px; height:5px; border-radius:50%; background:var(--success); }
        .cv-actions { display:flex; gap:6px; }
        .cv-btn { width:34px; height:34px; border-radius:9px; background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:15px; color:var(--text2); }
        #cv-msg-wrap { flex:1; overflow:hidden; display:flex; flex-direction:column; }
        #cv-messages { position:relative; z-index:1; flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; }
        #cv-bg { position:absolute; inset:0; background:var(--bg); background-size:cover; background-position:center; z-index:-3; pointer-events:none; }
        #cv-scene { position:absolute; inset:0; z-index:-2; pointer-events:none; opacity:0; transition:opacity 0.6s ease; }
        #cv-scene.active { opacity:1; }
        .cv-scene-layer { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1.1s ease; will-change:opacity,transform; }
        @keyframes ken-burns { from { transform:scale(1.09); } to { transform:scale(1.0); } }
        .cv-scene-layer.ken-burns { animation:ken-burns 7s ease-out forwards; }
        #cv-scene-scrim { position:absolute; inset:0; pointer-events:none;
          opacity: var(--scene-dim, 0.8); transition: opacity 0.25s ease;
          background:linear-gradient(to bottom, rgba(7,7,15,0.58) 0%, rgba(7,7,15,0.42) 22%, rgba(7,7,15,0.45) 58%, rgba(7,7,15,0.66) 100%); }
        #cv-bg-overlay { position:absolute; inset:0; background:rgba(7,7,15,0.65); z-index:-1; pointer-events:none; }
        #cv-msgs-inner { position:relative; z-index:1; display:flex; flex-direction:column; gap:10px; margin-top:auto; }
        body.bold-chat .msg-bub { font-weight:700; }
        body.bold-chat .font-card-sample { font-weight:700; }
        .chat-error-banner { align-self:center; display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center;
          background:rgba(220,53,69,0.12); border:1px solid rgba(220,53,69,0.35); color:var(--text);
          border-radius:12px; padding:10px 16px; margin:8px auto; max-width:90%; font-size:13px; text-align:center; }
        .chat-error-retry { background:var(--accent); color:#fff; border:none; border-radius:8px;
          padding:6px 16px; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; white-space:nowrap; }
        .chat-error-retry:active { opacity:0.8; }
        .msg-bub { font-family: var(--chat-font, 'Nunito', sans-serif); }
        .font-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
        .font-card { border-radius:10px; padding:10px 12px; border:2px solid var(--border2); cursor:pointer; transition:all .15s; text-align:left; background:var(--surface); }
        .font-card.sel { border-color:var(--accent); background:rgba(255,255,255,0.04); }
        .font-card-name { font-size:11px; color:var(--text3); margin-bottom:4px; font-family:'Nunito',sans-serif; font-weight:700; letter-spacing:0.3px; text-transform:uppercase; }
        .font-card-sample { font-size:15px; color:var(--text); line-height:1.3; }
        .msg { display:flex; gap:8px; animation:msgPop 0.2s ease both; align-items:flex-start; }
        .msg.u { flex-direction:row-reverse; }
        @keyframes msgPop { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
        .msg-av { width:32px; height:32px; border-radius:10px; background:linear-gradient(135deg,var(--accent2),var(--accent)); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; color:#fff; overflow:hidden; position:relative; }
        .msg-av img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
        .msg-av.u { background:linear-gradient(135deg,var(--accent3),var(--accent2)); }
        .msg-av.no-img { visibility:hidden; }
        .msg-body { display:flex; flex-direction:column; max-width:75%; min-width:0; }
        .msg.u .msg-body { align-items:flex-end; }
        .msg.bot .msg-body { align-items:flex-start; }
        .msg-bub { padding:10px 13px; border-radius:16px; font-size:var(--chat-font-size, 14px); line-height:1.6; word-break:break-word; overflow-wrap:break-word; transition:background 0.2s, border-color 0.2s; }
        .msg.bot .msg-bub { background:var(--bub-bot-bg, rgba(14,14,28,0.88)); border:1px solid var(--bub-bot-border, var(--border2)); border-top-left-radius:4px; backdrop-filter:blur(10px); color:var(--bub-bot-text, var(--text)); }
        .msg.u .msg-bub { background:var(--bub-user-bg, linear-gradient(135deg,rgba(255,77,141,0.2),rgba(178,77,255,0.2))); border:1px solid var(--bub-user-border, rgba(255,77,141,0.25)); border-top-right-radius:4px; color:var(--bub-user-text, var(--text)); }
        /* Bubble shapes */
        .bshape-soft .msg-bub { border-radius:24px !important; }
        .bshape-sharp .msg-bub { border-radius:4px !important; }
        .bshape-minimal .msg-bub { border-radius:8px !important; border:none !important; }
        .bshape-glow .msg.bot .msg-bub { border-radius:16px !important; box-shadow:0 0 10px var(--bub-bot-glow, var(--accent2)), 0 0 22px var(--bub-bot-glow-outer, rgba(178,77,255,0.18)) !important; }
        .bshape-glow .msg.u .msg-bub { box-shadow:0 0 10px var(--bub-user-glow, var(--accent)), 0 0 22px var(--bub-user-glow-outer, rgba(255,77,141,0.18)) !important; }
        /* Retro */
        .bshape-retro .msg-bub { border-radius:4px !important; }
        .bshape-retro .msg.bot .msg-bub { box-shadow:3px 3px 0 var(--bub-bot-border, var(--border2)) !important; }
        .bshape-retro .msg.u   .msg-bub { box-shadow:3px 3px 0 var(--bub-user-border, rgba(255,77,141,0.6)) !important; }
        /* Cristal — el color del swatch se refleja en el tinte del vidrio */
        .bshape-glass .msg-bub { backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-radius:16px !important; }
        .bshape-glass .msg.bot .msg-bub { background:var(--bub-bot-glass-bg, rgba(255,255,255,0.06)) !important; border:1px solid var(--bub-bot-glass-border, rgba(255,255,255,0.22)) !important; color:var(--text) !important; }
        .bshape-glass .msg.u   .msg-bub { background:var(--bub-user-glass-bg, rgba(255,77,141,0.1)) !important; border:1px solid var(--bub-user-glass-border, rgba(255,77,141,0.45)) !important; }
        /* Bocadillo */
        .bshape-bocadillo .msg-bub { border-radius:16px !important; position:relative; }
        .bshape-bocadillo .msg.bot .msg-bub { border-bottom-left-radius:2px !important; }
        .bshape-bocadillo .msg.u   .msg-bub { border-bottom-right-radius:2px !important; }
        .bshape-bocadillo .msg.bot .msg-bub::after { content:''; position:absolute; bottom:-8px; left:0; border-width:9px 9px 0 0; border-style:solid; border-color:var(--bub-bot-bg, rgba(14,14,28,0.88)) transparent transparent transparent; }
        .bshape-bocadillo .msg.u   .msg-bub::after { content:''; position:absolute; bottom:-8px; right:0; border-width:9px 0 0 9px; border-style:solid; border-color:var(--bub-user-bg, rgba(255,77,141,0.2)) transparent transparent transparent; }
        .msg-time { font-size:10px; color:var(--text3); margin-top:4px; }
        .msg.u .msg-time { text-align:right; }
        .typing-row { display:flex; gap:8px; }
        .typing-bub { padding:12px 16px; border-radius:16px; border-top-left-radius:4px; background:rgba(14,14,28,0.88); border:1px solid var(--border2); backdrop-filter:blur(10px); display:inline-flex; gap:4px; align-items:center; }
        .td { width:6px; height:6px; border-radius:50%; background:var(--text3); animation:tda 1.2s ease-in-out infinite; }
        .td:nth-child(2) { animation-delay:0.2s; }
        .td:nth-child(3) { animation-delay:0.4s; }
        @keyframes tda { 0%,60%,100% { transform:translateY(0); opacity:0.3; } 30% { transform:translateY(-5px); opacity:1; } }

        #cv-input-area { padding:10px 14px 12px; background:transparent; flex-shrink:0; }
        .cv-length { display:flex; align-items:center; gap:8px; margin-bottom:8px; background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:6px 10px; }
        .cv-length-lbl { font-size:11px; color:var(--text3); }
        .cv-length-range { flex:1; accent-color:var(--accent); }
        .cv-length-val { font-size:11px; color:var(--accent); min-width:64px; text-align:right; font-weight:700; }
        .cv-input-row { display:flex; gap:8px; align-items:flex-end; }
        #cv-input { flex:1; background:var(--surface); border:1px solid var(--border2); border-radius:12px; padding:10px 14px; color:var(--text); font-size:15px; font-family:'Nunito', sans-serif; outline:none; resize:none; min-height:44px; max-height:110px; line-height:1.4; }
        #cv-input:focus { border-color:var(--accent); }
        #cv-send { width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg,var(--accent),var(--accent2)); border:none; color:#fff; font-size:20px; cursor:pointer; }

        /* PROFILE */
        #profile-page { padding:0 0 70px; }
        .profile-hero { height:130px; position:relative; background:linear-gradient(135deg,var(--accent2),var(--accent)); margin-bottom:54px; }
        .profile-av-wrap { position:absolute; bottom:-44px; left:16px; }
        .profile-av { width:88px; height:88px; border-radius:50%; border:4px solid var(--bg); background:linear-gradient(135deg,var(--accent),var(--accent2)); display:flex; align-items:center; justify-content:center; font-size:34px; font-weight:900; color:#fff; }
        .profile-body { padding:0 16px; }
        .profile-name { font-family:'Raleway',sans-serif; font-size:22px; font-weight:900; }
        .profile-handle { font-size:13px; color:var(--text3); }
        .profile-stats { display:flex; gap:20px; margin:16px 0; }
        .pst { text-align:center; cursor:default; }
        .pst-btn { background:none; border:1px solid var(--border2); border-radius:10px; padding:8px 20px; cursor:pointer; color:inherit; }
        .pst-btn:active { border-color:var(--accent); }
        .pst-n { font-size:20px; font-weight:900; color:var(--accent); }
        .pst-l { font-size:11px; color:var(--text3); }
        .ptabs { display:flex; border-bottom:1px solid var(--border); margin-bottom:14px; }
        .ptab { flex:1; padding:10px; background:none; border:none; color:var(--text3); font-size:13px; font-weight:800; cursor:pointer; border-bottom:2px solid transparent; }
        .ptab.on { color:var(--accent); border-bottom-color:var(--accent); }
        .guest-banner { margin:0 16px 16px; background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), color-mix(in srgb, var(--accent2) 10%, transparent)); border:1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:10px; }
        .gb-top { display:flex; align-items:center; gap:10px; }
        .gb-top strong { font-size:14px; font-weight:800; }
        .gb-btns { display:flex; gap:8px; }
        .gb-btn { flex:1; padding:9px 8px; border-radius:8px; background:var(--accent); border:none; color:#fff; font-size:13px; font-weight:800; cursor:pointer; font-family:inherit; }
        .gb-btn-ghost { background:transparent; border:1px solid rgba(255,255,255,0.25); color:var(--text2); }

        /* MODALS */
        .overlay { position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%; background:rgba(0,0,0,0.82); z-index:1000; display:flex; align-items:center; justify-content:center; padding:16px; box-sizing:border-box; }
        .sheet { background:#1a1a35; border:1px solid rgba(255,77,141,0.2); border-radius:20px; padding:24px; width:100%; max-width:420px; max-height:85vh; overflow-y:auto; box-shadow:0 8px 40px rgba(0,0,0,0.6); }
        .sheet-header { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
        .sheet-title { font-family:'Raleway',sans-serif; font-size:20px; font-weight:900; }
        .btn-back-sheet { width:34px; height:34px; border-radius:10px; background:var(--surface); border:1px solid var(--border2); color:var(--text2); font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all 0.2s; }
        .btn-back-sheet:active { border-color:var(--accent); color:var(--accent); }
        .fi { width:100%; background:var(--bg); border:1px solid var(--border2); border-radius:10px; padding:12px 14px; color:var(--text); font-size:14px; outline:none; margin-bottom:10px; }
        .pw-wrap { position:relative; margin-bottom:10px; }
        .pw-wrap .fi { margin-bottom:0; padding-right:44px; }
        .pw-eye { position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--text3); font-size:18px; padding:4px; line-height:1; }
        .btn-main { width:100%; padding:13px; border-radius:12px; border:none; background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; font-size:16px; font-weight:800; cursor:pointer; margin-top:10px; }
        .hidden { display:none !important; }
        .toast { position:fixed; bottom:80px; left:50%; transform:translateX(-50%); background:var(--surface2); border:1px solid var(--border2); border-radius:10px; padding:10px 18px; font-size:13px; z-index:3000; }
        .toast.error { border-color:var(--danger); }
        @keyframes toastIn { from { opacity:0; transform:translateX(-50%) translateY(8px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }