/* ================================================================ KenexVault — kv-style.css v2.0 Design system: dark/light themes, typography, shared components Changes: cursor removed (uses OS default), live chat added, mobile layout fixes, popup/modal improvements ================================================================ */ /* ── DARK THEME (default) ── */ :root, [data-theme="dark"] { --void:#020508; --deep:#050c15; --surface:#080f1c; --panel:#0c1525; --panel-hi:#111e32; --border:rgba(255,255,255,0.06); --border-hi:rgba(255,255,255,0.12); --blue:#1d6fff; --blue-light:#4d91ff; --blue-glow:rgba(29,111,255,0.35); --blue-subtle:rgba(29,111,255,0.08); --cyan:#00d4ff; --cyan-dim:rgba(0,212,255,0.14); --cyan-glow:rgba(0,212,255,0.35); --green:#00e17a; --green-light:#3fffa0; --green-glow:rgba(0,225,122,0.30); --green-subtle:rgba(0,225,122,0.07); --volt:#00ff9d; --volt-dim:rgba(0,255,157,0.12); --volt-glow:rgba(0,255,157,0.3); --amber:#ffa820; --amber-dim:rgba(255,168,32,0.12); --red:#ff4040; --red-dim:rgba(255,64,64,0.12); --violet:#a855f7; --violet-light:#c084fc; --violet-dim:rgba(168,85,247,0.12); --violet-glow:rgba(168,85,247,0.32); --violet-subtle:rgba(168,85,247,0.08); --gold:#f59e0b; --gold-dim:rgba(245,158,11,0.12); --gold-glow:rgba(245,158,11,0.3); --text:#e8f0ff; --text-primary:#f0f4ff; --text-mid:#7a96c4; --text-secondary:#8a9cc2; --text-dim:#3a4f6e; --text-muted:#4a5a7a; --bg-overlay:rgba(2,5,8,0.92); --scrollbar-thumb:rgba(255,255,255,0.1); } /* ── LIGHT THEME ── */ [data-theme="light"] { --void:#f0f4fc; --deep:#e4eaf6; --surface:#ffffff; --panel:#f8faff; --panel-hi:#edf2fd; --border:rgba(0,0,0,0.08); --border-hi:rgba(0,0,0,0.15); --blue:#1d6fff; --blue-light:#1558d6; --blue-glow:rgba(29,111,255,0.25); --blue-subtle:rgba(29,111,255,0.07); --cyan:#0096cc; --cyan-dim:rgba(0,150,204,0.12); --cyan-glow:rgba(0,150,204,0.25); --green:#00a65a; --green-light:#007a42; --green-glow:rgba(0,166,90,0.25); --green-subtle:rgba(0,166,90,0.07); --volt:#00a65a; --volt-dim:rgba(0,166,90,0.12); --volt-glow:rgba(0,166,90,0.25); --amber:#c97d00; --amber-dim:rgba(201,125,0,0.10); --red:#d42b2b; --red-dim:rgba(212,43,43,0.10); --violet:#7c3aed; --violet-light:#9d5cf5; --violet-dim:rgba(124,58,237,0.10); --violet-glow:rgba(124,58,237,0.28); --violet-subtle:rgba(124,58,237,0.07); --gold:#b87d0a; --gold-dim:rgba(184,125,10,0.10); --gold-glow:rgba(184,125,10,0.25); --text:#1a2340; --text-primary:#0e1829; --text-mid:#4a6080; --text-secondary:#5a7090; --text-dim:#8a9bb5; --text-muted:#a0aec0; --bg-overlay:rgba(220,230,255,0.92); --scrollbar-thumb:rgba(0,0,0,0.15); } /* ── TOKENS ── */ :root { --font-hud:'Bebas Neue',sans-serif; --font-body:'DM Sans',sans-serif; --font-mono:'Space Mono',monospace; --radius-xs:5px; --radius-sm:8px; --radius-md:14px; --radius-lg:22px; --tr:0.28s cubic-bezier(0.4,0,0.2,1); --sidebar-w:248px; } /* ── RESET ── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{font-size:16px;scroll-behavior:smooth} body{ background:var(--void);color:var(--text);font-family:var(--font-body); line-height:1.6;overflow-x:hidden;min-height:100vh; transition:background .3s,color .3s,opacity .28s ease; cursor:auto; } /* Dashboard layout lock — added to on dashboard.html only */ body.dash-body{overflow:hidden} a{color:inherit;text-decoration:none} ul{list-style:none} img{max-width:100%;display:block} button{font-family:var(--font-body);cursor:pointer} ::selection{background:rgba(29,111,255,0.3);color:#fff} ::-webkit-scrollbar{width:5px;height:5px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:3px} /* ── PAGE TRANSITIONS ── */ body.page-leaving{opacity:0} @keyframes page-in{from{opacity:0}to{opacity:1}} .page-enter{animation:page-in .35s ease both} /* ── CANVAS BG ── */ #bg-canvas{position:fixed;inset:0;z-index:0;pointer-events:none} .grid-overlay{ position:fixed;inset:0;z-index:0;pointer-events:none; background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px); background-size:72px 72px; mask-image:radial-gradient(ellipse 85% 85% at 50% 50%,black 15%,transparent 72%); } /* ── SCROLL PROGRESS ── */ #scrollProgress{ position:fixed;top:0;left:0;height:2px;width:0%; background:linear-gradient(90deg,var(--blue),var(--cyan),var(--volt)); z-index:2000;pointer-events:none;transition:width .08s linear; } /* ── PAGE LOADER ── */ #page-loader{ position:fixed;inset:0;z-index:8000; background:var(--void); display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px; transition:opacity .5s,visibility .5s; } #page-loader.done{opacity:0;visibility:hidden;pointer-events:none} .pl-logo{font-family:var(--font-hud);font-size:2.4rem;letter-spacing:.1em;color:var(--text-primary)} .pl-logo span{color:var(--cyan)} .pl-bar{width:180px;height:2px;background:var(--border-hi);border-radius:2px;overflow:hidden} .pl-fill{height:100%;background:linear-gradient(90deg,var(--blue),var(--cyan),var(--volt));animation:pl-anim 1.1s ease-in-out forwards} @keyframes pl-anim{from{width:0}to{width:100%}} /* ── SCROLL REVEAL ── */ .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s var(--tr) var(--delay,0s),transform .6s var(--tr) var(--delay,0s)} .reveal.visible{opacity:1;transform:none} /* Fallback: if JS fails to run initReveal, force all reveal elements visible */ body:not(.js-reveal-ready) .reveal{opacity:1;transform:none} /* ── CONTAINER ── */ .container{max-width:1180px;margin:0 auto;padding:0 24px} /* ── BUTTONS ── */ .btn{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;font-weight:600;padding:10px 20px;border-radius:var(--radius-sm);border:1px solid transparent;cursor:pointer;transition:transform var(--tr),box-shadow var(--tr),background var(--tr),opacity var(--tr);white-space:nowrap} .btn:hover:not(:disabled){transform:translateY(-2px)} .btn:active:not(:disabled){transform:translateY(0)} .btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important} .btn svg{width:16px;height:16px;flex-shrink:0} .btn-sm{padding:7px 14px;font-size:.78rem} .btn-xs{padding:5px 10px;font-size:.72rem} .btn-lg{padding:14px 30px;font-size:.95rem} .btn-primary{background:var(--blue);color:#fff;border-color:var(--blue)} .btn-primary:hover:not(:disabled){background:var(--blue-light);box-shadow:0 8px 24px var(--blue-glow)} .btn-cyan{background:var(--cyan-dim);color:var(--cyan);border-color:rgba(0,212,255,.35)} .btn-cyan:hover:not(:disabled){background:rgba(0,212,255,.22);box-shadow:0 6px 20px var(--cyan-glow)} .btn-volt{background:var(--volt-dim);color:var(--volt);border-color:rgba(0,255,157,.3)} .btn-volt:hover:not(:disabled){background:rgba(0,255,157,.2);box-shadow:0 6px 20px var(--volt-glow)} .btn-gold{background:var(--gold-dim);color:var(--gold);border-color:rgba(245,158,11,.3)} .btn-gold:hover:not(:disabled){background:rgba(245,158,11,.22);box-shadow:0 6px 20px var(--gold-glow)} .btn-outline{background:transparent;color:var(--text-secondary);border-color:var(--border-hi)} .btn-outline:hover:not(:disabled){border-color:var(--blue);color:var(--blue-light)} .btn-danger{background:var(--red-dim);color:var(--red);border-color:rgba(255,64,64,.3)} .btn-danger:hover:not(:disabled){background:rgba(255,64,64,.22)} .btn-success{background:var(--green-subtle);color:var(--green-light);border-color:rgba(0,225,122,.3)} .btn-success:hover:not(:disabled){background:rgba(0,225,122,.18)} .btn-whatsapp{background:#25d366;color:#fff;border-color:#25d366} .btn-whatsapp:hover:not(:disabled){background:#1fba58;box-shadow:0 6px 20px rgba(37,211,102,.35)} .btn-icon{padding:8px;border-radius:var(--radius-sm);background:var(--panel);border-color:var(--border);color:var(--text-mid)} .btn-icon:hover:not(:disabled){border-color:var(--border-hi);color:var(--text-primary)} /* ── SPINNER ── */ .spinner{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.25);border-top-color:currentColor;border-radius:50%;animation:spin .65s linear infinite;flex-shrink:0} .spinner-sm{width:12px;height:12px} @keyframes spin{to{transform:rotate(360deg)}} /* ── BADGES ── */ .badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:20px;white-space:nowrap} .badge svg{width:10px;height:10px} .badge-dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0} .badge-active{background:var(--green-subtle);color:var(--volt);border:1px solid rgba(0,255,157,.25)} .badge-pending{background:var(--amber-dim);color:var(--amber);border:1px solid rgba(255,168,32,.3)} .badge-cancelled,.badge-inactive{background:var(--red-dim);color:var(--red);border:1px solid rgba(255,64,64,.25)} .badge-info{background:var(--blue-subtle);color:var(--blue-light);border:1px solid rgba(29,111,255,.25)} .badge-admin{background:var(--red-dim);color:var(--red);border:1px solid rgba(255,64,64,.3)} .badge-user{background:var(--border);color:var(--text-dim);border:1px solid var(--border-hi)} .badge-blue{background:var(--blue-subtle);color:var(--blue-light);border:1px solid rgba(29,111,255,.2)} .badge-cyan{background:var(--cyan-dim);color:var(--cyan);border:1px solid rgba(0,212,255,.3)} .badge-volt{background:var(--volt-dim);color:var(--volt);border:1px solid rgba(0,255,157,.3)} .badge-gold{background:var(--gold-dim);color:var(--gold);border:1px solid rgba(245,158,11,.3)} .badge-amber{background:var(--amber-dim);color:var(--amber);border:1px solid rgba(255,168,32,.25)} .pulsing::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:currentColor;animation:pulse-dot 2s ease-in-out infinite;margin-right:5px} @keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.3}} /* ── TOAST ── */ .toast-container{position:fixed;bottom:24px;right:24px;z-index:9900;display:flex;flex-direction:column;gap:10px;pointer-events:none;max-width:360px;width:calc(100% - 32px)} .toast{display:flex;align-items:flex-start;gap:12px;background:var(--panel);border:1px solid var(--border-hi);border-radius:var(--radius-sm);padding:14px 18px;font-size:.85rem;color:var(--text-secondary);box-shadow:0 8px 30px rgba(0,0,0,.5);animation:toast-in .3s cubic-bezier(0.34,1.56,0.64,1);pointer-events:auto} .toast.success{border-color:rgba(0,255,157,.3);color:var(--text-primary)} .toast.error{border-color:rgba(255,64,64,.3)} .toast.info{border-color:rgba(0,212,255,.3)} .toast.warning{border-color:rgba(255,168,32,.3)} .toast-icon{flex-shrink:0;margin-top:1px} .toast-icon svg{width:15px;height:15px} .toast.success .toast-icon{color:var(--volt)} .toast.error .toast-icon{color:var(--red)} .toast.info .toast-icon{color:var(--cyan)} .toast.warning .toast-icon{color:var(--amber)} @keyframes toast-in{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}} @media(max-width:520px){.toast-container{bottom:80px;right:12px;left:12px;max-width:100%}} /* ── FORM FIELDS ── */ .field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px} .field label{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-mid)} .field input,.field select,.field textarea{ background:var(--surface);border:1px solid var(--border-hi); border-radius:var(--radius-sm);padding:12px 14px; font-family:var(--font-body);font-size:.92rem;color:var(--text); outline:none;transition:border-color .2s,box-shadow .2s;width:100%; } .field input:focus,.field select:focus,.field textarea:focus{border-color:rgba(0,212,255,.5);box-shadow:0 0 0 3px rgba(0,212,255,.07)} .field input.is-invalid{border-color:rgba(255,64,64,.5);animation:shake .3s} .field input.is-valid{border-color:rgba(0,255,157,.4)} .field textarea{resize:vertical;min-height:100px} .field select{cursor:pointer} .field select option{background:var(--surface)} /* ── Subdomain address bar ── */ .subdomain-bar{display:flex;align-items:center;gap:0;border:1.5px solid var(--border-hi);border-radius:10px;overflow:hidden;background:var(--bg-secondary);transition:border-color .2s} .subdomain-bar:focus-within{border-color:rgba(0,212,255,.5);box-shadow:0 0 0 3px rgba(0,212,255,.07)} .subdomain-bar-prefix,.subdomain-bar-suffix{padding:10px 12px;font-family:var(--font-mono);font-size:.78rem;color:var(--text-dim);background:var(--surface);white-space:nowrap;border:none;flex-shrink:0;line-height:1.4} .subdomain-bar-prefix{border-right:1px solid var(--border)} .subdomain-bar-suffix{border-left:1px solid var(--border)} .subdomain-bar input{flex:1;min-width:0;padding:10px 12px;background:transparent;border:none;outline:none;font-family:var(--font-mono);font-size:.82rem;color:var(--text-primary);letter-spacing:.02em} .subdomain-status{font-family:var(--font-mono);font-size:.68rem;margin-top:7px;padding:5px 10px;border-radius:6px;display:inline-block} .subdomain-status.available{color:#00e17a;background:rgba(0,225,122,.08);border:1px solid rgba(0,225,122,.2)} .subdomain-status.taken{color:#ff5f5f;background:rgba(255,64,64,.08);border:1px solid rgba(255,64,64,.2)} .subdomain-status.checking{color:var(--text-dim);background:var(--bg-secondary);border:1px solid var(--border)} @keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}} /* ── PASSWORD STRENGTH ── */ .strength-bar{display:flex;gap:4px;margin-top:5px} .strength-seg{height:3px;flex:1;border-radius:2px;background:var(--border-hi);transition:background .3s} .strength-label{font-family:var(--font-mono);font-size:.58rem;color:var(--text-dim);margin-top:3px} /* ── MODAL — fixed viewport-centred, never off-screen ── */ .modal-overlay{ display:none;position:fixed;inset:0;z-index:3000; background:var(--bg-overlay);backdrop-filter:blur(16px); align-items:flex-start;justify-content:center; padding:20px 16px;overflow-y:auto; } .modal-overlay.open{display:flex;animation:modal-bg-in .2s ease} @keyframes modal-bg-in{from{opacity:0}to{opacity:1}} .modal-box{ background:var(--panel);border:1px solid var(--border-hi); border-radius:var(--radius-lg);max-width:480px;width:100%; overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.8); animation:modal-in .3s cubic-bezier(0.34,1.4,0.64,1); margin:auto;/* centres vertically when content < viewport */ flex-shrink:0; } @keyframes modal-in{from{opacity:0;transform:scale(.94) translateY(14px)}to{opacity:1;transform:none}} .modal-shimmer{height:2px;background:linear-gradient(90deg,transparent,var(--cyan),var(--volt),transparent)} .modal-header{display:flex;align-items:center;justify-content:space-between;padding:22px 26px;border-bottom:1px solid var(--border)} .modal-title{font-family:var(--font-hud);font-size:1.3rem;letter-spacing:.08em;color:var(--text-primary)} .modal-close{background:rgba(255,255,255,.05);border:1px solid var(--border-hi);border-radius:6px;width:30px;height:30px;cursor:pointer;color:var(--text-mid);display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s;flex-shrink:0} .modal-close:hover{background:rgba(255,255,255,.1);color:var(--text-primary)} .modal-close svg{width:12px;height:12px} .modal-body{padding:26px} .modal-footer{padding:16px 26px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap} /* ── CONFIRM DIALOG ── */ .confirm-overlay{display:none;position:fixed;inset:0;z-index:5000;background:var(--bg-overlay);backdrop-filter:blur(12px);align-items:center;justify-content:center;padding:24px} .confirm-overlay.open{display:flex} .confirm-box{background:var(--panel);border:1px solid rgba(255,64,64,.3);border-radius:var(--radius-md);padding:32px;max-width:400px;width:100%;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.75);animation:modal-in .25s ease} .confirm-icon{width:52px;height:52px;border-radius:50%;background:var(--red-dim);border:1px solid rgba(255,64,64,.25);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;color:var(--red)} .confirm-icon svg{width:26px;height:26px} .confirm-title{font-family:var(--font-hud);font-size:1.4rem;letter-spacing:.06em;color:var(--text-primary);margin-bottom:10px} .confirm-msg{font-size:.875rem;color:var(--text-secondary);margin-bottom:24px;line-height:1.65} .confirm-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} /* ── EMPTY STATE ── */ .empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 24px;text-align:center;gap:14px} .empty-state svg{width:44px;height:44px;color:var(--text-dim);opacity:.45} .empty-state h3{font-size:.95rem;font-weight:600;color:var(--text-mid)} .empty-state p{font-size:.82rem;color:var(--text-muted);max-width:280px;line-height:1.6} /* ── LOADING SCREEN ── */ #auth-loading{position:fixed;inset:0;z-index:7000;background:var(--void);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px} .loading-logo{font-family:var(--font-hud);font-size:2.4rem;letter-spacing:.1em;color:var(--text-primary)} .loading-logo span{color:var(--cyan)} .loading-bar{width:200px;height:2px;background:var(--border-hi);border-radius:2px;overflow:hidden} .loading-bar-fill{height:100%;background:linear-gradient(90deg,var(--blue),var(--cyan),var(--volt));animation:load-fill 1.2s ease-in-out forwards} @keyframes load-fill{from{width:0%}to{width:100%}} .loading-sub{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;color:var(--text-dim);text-transform:uppercase} /* ── NAVBAR ── */ #navbar{ position:fixed;top:0;left:0;right:0;z-index:9999; background:rgba(2,5,8,0.92); border-bottom:1px solid var(--border); transition:background var(--tr),border-color var(--tr); } [data-theme="light"] #navbar{background:rgba(240,244,252,0.88)} #navbar.scrolled{background:rgba(2,5,8,0.97);border-bottom-color:rgba(29,111,255,.18)} [data-theme="light"] #navbar.scrolled{background:rgba(240,244,252,0.98)} #navbar::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--cyan-dim),var(--volt-dim),transparent)} .nav-inner{max-width:1180px;margin:0 auto;padding:0 24px;height:66px;display:flex;align-items:center;gap:24px;justify-content:space-between} .nav-logo{font-family:var(--font-hud);font-size:1.5rem;letter-spacing:.08em;color:var(--text-primary);flex-shrink:0;transition:color var(--tr)} .nav-logo span{color:var(--cyan)} .nav-links{display:flex;gap:26px;margin-left:auto;align-items:center} .nav-links a{font-size:.875rem;font-weight:500;color:var(--text-secondary);position:relative;transition:color var(--tr)} .nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--blue);border-radius:2px;transition:width var(--tr)} .nav-links a:hover,.nav-links a.nav-active{color:var(--text-primary)} .nav-links a:hover::after,.nav-links a.nav-active::after{width:100%} /* Theme toggle */ .theme-toggle{width:34px;height:34px;border-radius:var(--radius-sm);background:var(--panel);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-mid);transition:border-color var(--tr),color var(--tr)} .theme-toggle:hover{border-color:var(--border-hi);color:var(--text-primary)} .theme-toggle svg{width:16px;height:16px} /* Hamburger */ .hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;margin-left:8px} .hamburger span{display:block;width:22px;height:2px;background:var(--text-secondary);border-radius:2px;transition:transform var(--tr),opacity var(--tr)} .hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);background:var(--blue)} .hamburger.open span:nth-child(2){opacity:0} .hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);background:var(--blue)} .mobile-menu{display:none;flex-direction:column;padding:14px 20px 20px;gap:3px;border-top:1px solid var(--border);background:rgba(2,5,8,0.98)} [data-theme="light"] .mobile-menu{background:rgba(240,244,252,0.98)} .mobile-menu.open{display:flex} .mob-link{padding:11px 0;font-size:.95rem;font-weight:500;color:var(--text-secondary);border-bottom:1px solid var(--border);transition:color var(--tr)} .mob-link:last-child{border-bottom:none} .mob-link:hover{color:var(--text-primary)} @media(max-width:860px){.nav-links{display:none}.hamburger{display:flex}} /* ── SECTION LABELS ── */ .section-label{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-light);display:block;margin-bottom:10px} .section-title{font-family:var(--font-hud);font-size:clamp(2.2rem,5vw,3.6rem);line-height:1;letter-spacing:.02em;color:var(--text-primary)} .gradient-text{background:linear-gradient(90deg,var(--blue-light),var(--green-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} /* ── PLAN CARDS ── */ .plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:20px} @media(max-width:900px){.plan-grid{grid-template-columns:1fr;max-width:420px}} .plan-card-shared{position:relative;background:var(--panel);border-radius:14px;border:1px solid var(--border);overflow:hidden;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s,border-color .3s} .plan-card-shared:hover{transform:translateY(-5px);box-shadow:0 24px 60px rgba(0,0,0,.5)} .plan-card-shared.featured{border-color:rgba(0,212,255,.3);background:linear-gradient(170deg,rgba(0,212,255,0.07),var(--panel) 40%)} .plan-card-shared.featured:hover{box-shadow:0 24px 60px rgba(0,212,255,.14);border-color:rgba(0,212,255,.5)} .plan-ribbon{position:absolute;top:0;right:0;background:linear-gradient(135deg,var(--cyan),rgba(0,212,255,.65));color:#020508;font-family:var(--font-hud);font-size:.52rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;padding:5px 22px 5px 14px;clip-path:polygon(0 0,100% 0,100% 100%,10px 100%)} .plan-body-shared{padding:24px 22px;display:flex;flex-direction:column;flex:1;position:relative;z-index:1} .plan-badge-label{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:3px;margin-bottom:12px;width:fit-content} .plan-name{font-family:var(--font-hud);font-size:1.4rem;letter-spacing:.08em;color:var(--text-primary);margin-bottom:2px} .plan-desc{font-size:.78rem;color:var(--text-mid);margin-bottom:14px;line-height:1.5} .price-row{display:flex;align-items:baseline;gap:2px;margin-bottom:2px} .p-cur{font-family:var(--font-mono);font-size:.8rem;color:var(--text-mid)} .p-amt{font-family:var(--font-hud);font-size:2.6rem;line-height:1;color:var(--text-primary)} .p-period{font-family:var(--font-mono);font-size:.65rem;color:var(--text-dim)} .p-note{font-family:var(--font-mono);font-size:.56rem;color:var(--text-dim);margin-bottom:10px} .annual-savings{display:none;align-items:center;gap:8px;background:linear-gradient(135deg,rgba(0,255,157,.06),rgba(0,212,255,.04));border:1px solid rgba(0,255,157,.2);border-radius:6px;padding:7px 11px;margin-bottom:11px} .annual-savings.show{display:flex} .as-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);display:block} .as-total{font-family:var(--font-hud);font-size:1rem;color:var(--volt)} .as-badge{font-family:var(--font-mono);font-size:.52rem;color:var(--green-light);background:rgba(0,225,122,.1);border:1px solid rgba(0,225,122,.2);border-radius:20px;padding:2px 7px} .plan-divider{height:1px;background:linear-gradient(90deg,transparent,var(--border-hi),transparent);margin:10px 0} .plan-feats{flex:1;display:flex;flex-direction:column;gap:7px;margin-bottom:14px} .feat-row{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--text-mid)} .feat-row.off{opacity:.3;text-decoration:line-through} .fi{width:16px;height:16px;border-radius:3px;flex-shrink:0;display:flex;align-items:center;justify-content:center} .fi svg{width:9px;height:9px} .fi-yes{background:rgba(0,255,157,.1);color:var(--volt);border:1px solid rgba(0,255,157,.25)} .fi-no{background:rgba(255,255,255,.04);color:var(--text-dim);border:1px solid var(--border)} .plan-cta-shared{display:flex;width:100%;text-align:center;font-family:var(--font-hud);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;padding:11px 18px;border-radius:6px;cursor:pointer;align-items:center;justify-content:center;gap:7px;transition:transform .25s,box-shadow .25s} .plan-cta-shared svg{width:11px;height:11px;flex-shrink:0} /* ── USAGE BAR ── */ .usage-item{margin-bottom:14px} .usage-item:last-child{margin-bottom:0} .usage-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px} .usage-label{font-size:.82rem;color:var(--text-secondary)} .usage-value{font-family:var(--font-mono);font-size:.7rem;color:var(--text-mid)} .usage-bar{height:5px;background:var(--border-hi);border-radius:3px;overflow:hidden} .usage-fill{height:100%;border-radius:3px;transition:width .8s cubic-bezier(0.4,0,0.2,1)} .fill-blue{background:linear-gradient(90deg,var(--blue),var(--cyan))} .fill-green{background:linear-gradient(90deg,var(--green),var(--volt))} .fill-gold{background:linear-gradient(90deg,var(--amber),var(--gold))} .fill-red{background:linear-gradient(90deg,#ff6060,var(--red))} /* ── CARDS ── */ .card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-md);padding:24px} .card-title{font-family:var(--font-hud);font-size:1rem;letter-spacing:.08em;color:var(--text-primary);margin-bottom:16px;display:flex;align-items:center;gap:8px} .card-title svg{width:17px;height:17px;color:var(--cyan);opacity:.8} .card-hover{transition:transform var(--tr),border-color var(--tr),box-shadow var(--tr)} .card-hover:hover{transform:translateY(-4px);border-color:var(--border-hi);box-shadow:0 12px 40px rgba(0,0,0,.3)} /* ── TABLE ── */ .table-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;margin-bottom:24px} .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} table{width:100%;border-collapse:collapse;font-size:.85rem;min-width:500px} thead th{background:rgba(255,255,255,.02);padding:11px 16px;text-align:left;font-family:var(--font-mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);border-bottom:1px solid var(--border);white-space:nowrap;font-weight:400} tbody td{padding:12px 16px;color:var(--text-secondary);border-bottom:1px solid var(--border);vertical-align:middle} tbody tr:last-child td{border-bottom:none} tbody tr:hover td{background:rgba(29,111,255,.03);color:var(--text-primary)} .table-controls{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--border);flex-wrap:wrap} .search-wrap{position:relative;flex:1;min-width:140px;max-width:280px} .search-wrap svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--text-dim);pointer-events:none} .search-input{width:100%;background:var(--surface);border:1px solid var(--border-hi);border-radius:var(--radius-sm);padding:8px 10px 8px 30px;font-family:var(--font-body);font-size:.82rem;color:var(--text);outline:none;transition:border-color .2s} .search-input:focus{border-color:rgba(0,212,255,.4);box-shadow:0 0 0 3px rgba(0,212,255,.07)} .search-input::placeholder{color:var(--text-dim)} .filter-select{background:var(--surface);border:1px solid var(--border-hi);border-radius:var(--radius-sm);padding:8px 10px;font-family:var(--font-body);font-size:.82rem;color:var(--text);outline:none;cursor:pointer} .filter-select:focus{border-color:rgba(0,212,255,.4)} .filter-select option{background:var(--surface)} .table-count{font-family:var(--font-mono);font-size:.6rem;color:var(--text-dim);margin-left:auto} /* ── SIDEBAR ── */ #sidebar{ width:var(--sidebar-w);background:rgba(5,8,15,0.98); border-right:1px solid var(--border); display:flex;flex-direction:column; position:fixed;top:0;left:0;bottom:0;z-index:300; transition:transform var(--tr); overflow:hidden; transform:translateX(-100%); } @media(min-width:769px){ #sidebar{transform:translateX(0);} #main{margin-left:var(--sidebar-w);} } [data-theme="light"] #sidebar{background:rgba(248,250,255,0.98);border-right-color:var(--border)} .sidebar-logo{padding:22px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;flex-shrink:0} .sidebar-logo-mark{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--blue),var(--cyan));display:flex;align-items:center;justify-content:center;flex-shrink:0} .sidebar-logo-mark svg{width:18px;height:18px;color:#fff} .sidebar-logo-text{font-family:var(--font-hud);font-size:1.25rem;letter-spacing:.08em;color:var(--text-primary)} .sidebar-logo-text span{color:var(--cyan)} .sidebar-nav{flex:1;min-height:0;overflow-y:auto;padding:14px 0;scrollbar-width:none;-webkit-overflow-scrolling:touch} .sidebar-nav::-webkit-scrollbar{display:none} .nav-section-label{font-family:var(--font-mono);font-size:.52rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);padding:12px 18px 5px;margin-top:6px} .nav-item{display:flex;align-items:center;gap:12px;padding:11px 18px;color:var(--text-mid);font-size:.875rem;font-weight:500;cursor:pointer;transition:color var(--tr),background var(--tr);position:relative;border-left:2px solid transparent;user-select:none;min-height:44px} .nav-item:hover{color:var(--text-primary);background:rgba(29,111,255,.04)} .nav-item.active{color:var(--cyan);background:rgba(0,212,255,.05);border-left-color:var(--cyan)} .nav-item svg{width:17px;height:17px;flex-shrink:0;opacity:.7} .nav-item.active svg{opacity:1} .nav-badge{margin-left:auto;background:var(--amber);color:#1a0d00;font-family:var(--font-mono);font-size:.5rem;font-weight:700;padding:2px 7px;border-radius:20px;min-width:20px;text-align:center} .sidebar-footer{padding:14px 18px;border-top:1px solid var(--border);flex-shrink:0} .user-mini{display:flex;align-items:center;gap:10px;cursor:pointer;padding:8px;border-radius:var(--radius-sm);transition:background var(--tr)} .user-mini:hover{background:rgba(255,255,255,.04)} .user-avatar-sm{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--cyan));display:flex;align-items:center;justify-content:center;font-family:var(--font-hud);font-size:.9rem;color:#fff;flex-shrink:0;overflow:hidden} .user-avatar-sm img{width:100%;height:100%;object-fit:cover} .user-mini-info{flex:1;min-width:0} .user-mini-name{font-size:.82rem;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .user-mini-role{font-family:var(--font-mono);font-size:.56rem;color:var(--text-dim);letter-spacing:.06em;text-transform:uppercase} .sign-out-btn{background:none;border:none;cursor:pointer;color:var(--text-dim);transition:color var(--tr);padding:4px;display:flex} .sign-out-btn:hover{color:var(--red)} .sign-out-btn svg{width:16px;height:16px} /* ── DASHBOARD LAYOUT ── */ #dash-layout{display:flex;height:100vh;overflow:hidden;position:relative;z-index:1} #main{flex:1;min-width:0;display:flex;flex-direction:column;height:100vh;overflow:hidden;transition:margin-left var(--tr)} #topbar{ height:62px;flex-shrink:0; background:rgba(5,8,15,0.98); border-bottom:1px solid var(--border); display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap; padding:0 20px 0 24px; gap:16px; z-index:100; overflow:hidden; } [data-theme="light"] #topbar{background:rgba(248,250,255,0.97);border-bottom-color:#dde5f0} .topbar-title{ font-family:var(--font-hud);font-size:1.1rem;letter-spacing:.08em; color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; flex:1;min-width:0;border:none;padding:0; } .topbar-title span{color:var(--cyan);font-size:.78rem;margin-left:10px;font-family:var(--font-mono);letter-spacing:.1em;opacity:.8} .topbar-divider{width:1px;height:28px;background:var(--border-hi);margin:0 16px;flex-shrink:0} .topbar-actions{ display:flex;flex-direction:row;align-items:center;gap:2px; flex-shrink:0; background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:40px; padding:3px 4px 3px 10px; height:40px; overflow:hidden; } [data-theme="light"] .topbar-actions{background:rgba(0,0,0,.03);border-color:#dde5f0} .topbar-theme-btn{ display:flex;align-items:center;justify-content:center; width:30px;height:30px;border-radius:50%; border:none;background:transparent; cursor:pointer;color:var(--text-secondary); transition:background .2s,color .2s;flex-shrink:0; } .topbar-theme-btn:hover{background:rgba(0,212,255,.1);color:var(--cyan)} [data-theme="light"] .topbar-theme-btn:hover{background:rgba(29,111,255,.08);color:var(--blue)} .topbar-notif-wrap{position:relative;flex-shrink:0} .icon-btn{ display:flex;align-items:center;justify-content:center; width:30px;height:30px;border-radius:50%; border:none;background:transparent; cursor:pointer;color:var(--text-secondary); transition:background .2s,color .2s;position:relative; } .icon-btn:hover{background:rgba(0,212,255,.1);color:var(--cyan)} .icon-btn svg{width:16px;height:16px} .notif-dot{position:absolute;top:5px;right:5px;width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 6px var(--cyan);border:1.5px solid var(--void)} .topbar-user{ display:flex;align-items:center;gap:8px; cursor:pointer;padding:3px 8px 3px 4px; border-radius:30px; transition:background .2s; max-width:200px; } .topbar-user:hover{background:rgba(255,255,255,.05)} [data-theme="light"] .topbar-user:hover{background:rgba(0,0,0,.04)} .topbar-avatar{ width:28px;height:28px;border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--cyan)); display:flex;align-items:center;justify-content:center; font-family:var(--font-hud);font-size:.85rem;color:#fff; overflow:hidden;flex-shrink:0; } .topbar-email{ font-size:.72rem;color:var(--text-secondary); max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .hamburger-dash{ display:none;background:none;border:none;cursor:pointer; color:var(--text-mid);padding:4px;margin-right:8px; align-items:center;justify-content:center; min-width:36px;min-height:36px; } .hamburger-dash svg{width:20px;height:20px} .sidebar-overlay{position:fixed;inset:0;z-index:198;background:rgba(2,5,8,.6);display:none} .sidebar-overlay.active{display:block} @media(max-width:768px){ .hamburger-dash{display:flex} #sidebar{transform:translateX(-100%)} #sidebar.open{transform:translateX(0);touch-action:auto;pointer-events:all} #main{margin-left:0;height:100vh} #topbar{padding:0 12px} .topbar-email{display:none} .topbar-divider{display:none} #content{padding:16px} .sidebar-overlay{touch-action:auto} } #content{flex:1;min-height:0;padding:28px;overflow-y:scroll;overflow-x:hidden;-webkit-overflow-scrolling:touch} /* ── DASH PANELS ── */ .dash-panel{display:none;opacity:0} .dash-panel.active{display:block;animation:panel-enter .22s cubic-bezier(.16,1,.3,1) forwards} @keyframes panel-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} /* Stat cards */ .stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin-bottom:26px} .stat-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-md);padding:16px 18px;position:relative;overflow:hidden;transition:border-color var(--tr),transform var(--tr)} #ov-live-row>div{padding:16px 18px !important} #ov-live-row>div svg[width="28"]{top:16px !important;right:16px !important} #ov-live-row{grid-auto-rows:106px} .stat-cards{grid-auto-rows:106px !important} .sc-value{font-size:1.7rem} .sc-label{margin-bottom:6px} .sc-sub{font-size:.72rem} .stat-card:hover{border-color:var(--border-hi);transform:translateY(-3px)} .stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px} .stat-card.blue::before{background:linear-gradient(90deg,var(--blue),var(--cyan))} .stat-card.green::before{background:linear-gradient(90deg,var(--green),var(--volt))} .stat-card.gold::before{background:linear-gradient(90deg,var(--amber),var(--gold))} .stat-card.red::before{background:linear-gradient(90deg,#ff6060,var(--red))} .stat-card.violet::before{background:linear-gradient(90deg,var(--violet),var(--blue))} .sc-label{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);margin-bottom:8px} .sc-value{font-family:var(--font-hud);font-size:1.7rem;line-height:1;color:var(--text-primary);margin-bottom:4px} .sc-value.cyan{color:var(--cyan)}.sc-value.volt{color:var(--volt)}.sc-value.gold{color:var(--gold)}.sc-value.red-v{color:var(--red)}.sc-value.blue{color:var(--blue-light)} .sc-sub{font-size:.76rem;color:var(--text-muted)} .sc-icon{position:absolute;top:18px;right:18px;opacity:.1} .sc-icon svg{width:30px;height:30px} .section-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:10px} .section-hdr h2{font-family:var(--font-hud);font-size:1.3rem;letter-spacing:.06em;color:var(--text-primary)} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:22px} @media(max-width:860px){.grid-2{grid-template-columns:1fr}} .grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px;margin-bottom:22px} @media(max-width:900px){.grid-3{grid-template-columns:1fr}} /* Toggle switch */ .toggle-row{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--border)} .toggle-row:last-child{border-bottom:none} .toggle-label-group span:first-child{font-size:.875rem;color:var(--text-primary)} .toggle-label-group span:last-child{font-size:.75rem;color:var(--text-muted)} .toggle-sw{position:relative;width:38px;height:20px;border-radius:10px;cursor:pointer;background:var(--border-hi);border:1px solid var(--border);transition:background .3s;flex-shrink:0} .toggle-sw.on{background:rgba(0,212,255,.2);border-color:rgba(0,212,255,.4)} .toggle-sw::after{content:'';position:absolute;width:14px;height:14px;border-radius:50%;background:var(--text-dim);top:2px;left:2px;transition:transform .25s,background .25s} .toggle-sw.on::after{transform:translateX(18px);background:var(--cyan);box-shadow:0 0 6px var(--cyan-glow)} /* Billing toggle */ .billing-toggle-row{display:flex;align-items:center;gap:12px;margin-bottom:24px;flex-wrap:wrap} .billing-toggle{display:inline-flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--border-hi);border-radius:40px;padding:5px 16px;font-family:var(--font-mono);font-size:.65rem;letter-spacing:.06em} .b-lbl{color:var(--text-muted);cursor:pointer;transition:color var(--tr)} .b-lbl.active{color:var(--cyan)} .b-sw{position:relative;width:36px;height:20px;background:var(--blue-subtle);border:1px solid rgba(29,111,255,.3);border-radius:10px;cursor:pointer;transition:background .3s} .b-sw::after{content:'';position:absolute;width:14px;height:14px;border-radius:50%;background:var(--blue);top:2px;left:2px;transition:transform .3s,background .3s;box-shadow:0 0 6px var(--blue-glow)} .b-sw.on{background:rgba(0,255,157,.15);border-color:rgba(0,255,157,.35)} .b-sw.on::after{transform:translateX(16px);background:var(--volt);box-shadow:0 0 8px var(--volt-glow)} .save-badge{display:none;background:var(--volt-dim);color:var(--volt);border:1px solid rgba(0,255,157,.25);border-radius:20px;padding:2px 9px;font-family:var(--font-mono);font-size:.58rem} .save-badge.show{display:inline-block} /* Activity feed */ .activity-item{display:flex;align-items:flex-start;gap:13px;padding:11px 0;border-bottom:1px solid var(--border)} .activity-item:last-child{border-bottom:none} .activity-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:6px} .dot-blue{background:var(--blue);box-shadow:0 0 5px var(--blue-glow)} .dot-green{background:var(--volt);box-shadow:0 0 5px var(--volt-glow)} .dot-amber{background:var(--amber)} .dot-red{background:var(--red)} .dot-cyan{background:var(--cyan);box-shadow:0 0 5px var(--cyan-glow)} .activity-text{flex:1;font-size:.82rem;color:var(--text-secondary);line-height:1.5} .activity-time{font-family:var(--font-mono);font-size:.6rem;color:var(--text-dim);flex-shrink:0;margin-top:2px} /* Orbs */ .orb{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;animation:float 8s ease-in-out infinite} .orb-blue{width:500px;height:500px;background:radial-gradient(circle,rgba(29,111,255,.16) 0%,transparent 70%);top:-100px;left:-100px} .orb-green{width:400px;height:400px;background:radial-gradient(circle,rgba(0,225,122,.12) 0%,transparent 70%);bottom:-80px;right:-60px;animation-delay:-3s} .orb-mid{width:280px;height:280px;background:radial-gradient(circle,rgba(0,212,255,.07) 0%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:-5s} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-26px)}} /* File manager */ .file-item{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--border);transition:background var(--tr)} .file-item:last-child{border-bottom:none} .file-item:hover{background:rgba(29,111,255,.03)} .file-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .file-icon svg{width:18px;height:18px} .file-name{flex:1;font-size:.875rem;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .file-size{font-family:var(--font-mono);font-size:.65rem;color:var(--text-dim);flex-shrink:0} .file-date{font-family:var(--font-mono);font-size:.62rem;color:var(--text-dim);flex-shrink:0;min-width:80px;text-align:right} .file-actions{display:flex;gap:6px;flex-shrink:0;opacity:0;transition:opacity var(--tr)} .file-item:hover .file-actions{opacity:1} @media(max-width:600px){.file-actions{opacity:1}.file-date{display:none}} /* Drop zone */ .drop-zone{border:2px dashed var(--border-hi);border-radius:var(--radius-md);padding:40px 24px;text-align:center;cursor:pointer;transition:border-color var(--tr),background var(--tr)} .drop-zone:hover,.drop-zone.drag-over{border-color:var(--cyan);background:rgba(0,212,255,.04)} .drop-zone svg{width:40px;height:40px;color:var(--text-dim);opacity:.5;margin:0 auto 14px} .drop-zone p{font-size:.875rem;color:var(--text-secondary);margin-bottom:6px} .drop-zone span{font-size:.78rem;color:var(--text-dim)} /* Footer */ footer.site-footer{border-top:1px solid var(--border);padding:64px 0 28px;background:rgba(5,8,15,0.99)} [data-theme="light"] footer.site-footer{background:rgba(235,240,255,0.99)} .footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:40px;margin-bottom:44px} @media(max-width:860px){.footer-top{grid-template-columns:1fr 1fr;gap:24px}} @media(max-width:520px){.footer-top{grid-template-columns:1fr}} .footer-logo{font-family:var(--font-hud);font-size:1.4rem;letter-spacing:.08em;color:var(--text-primary)} .footer-logo span{color:var(--cyan)} .footer-tagline{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.1em;color:var(--blue-light);text-transform:uppercase;margin:4px 0 8px} .footer-desc{font-size:.84rem;color:var(--text-muted);line-height:1.65} .footer-group h4{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-primary);margin-bottom:12px} .footer-group a{display:block;font-size:.84rem;color:var(--text-muted);margin-bottom:8px;transition:color var(--tr)} .footer-group a:hover{color:var(--text-primary)} .footer-bottom{border-top:1px solid var(--border);padding-top:22px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px} .footer-bottom p{font-size:.78rem;color:var(--text-muted)} .footer-legal{display:flex;gap:18px;flex-wrap:wrap} .footer-legal a{font-size:.78rem;color:var(--text-muted);transition:color var(--tr)} .footer-legal a:hover{color:var(--text-primary)} .social-links{display:flex;gap:7px;margin-top:8px} .social-btn{width:32px;height:32px;border-radius:var(--radius-sm);background:var(--panel);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-muted);transition:border-color var(--tr),color var(--tr)} .social-btn:hover{border-color:var(--blue);color:var(--blue-light)} .social-btn svg{width:14px;height:14px} /* Cookie banner */ #cookie-banner{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:7000;background:var(--panel);border:1px solid var(--border-hi);border-radius:var(--radius-md);padding:14px 18px;max-width:520px;width:calc(100% - 32px);display:flex;align-items:center;gap:14px;box-shadow:0 12px 40px rgba(0,0,0,.55);animation:modal-in .3s ease;font-size:.8rem;color:var(--text-secondary)} #cookie-banner.hidden{display:none} .cookie-text{flex:1;line-height:1.5} .cookie-text a{color:var(--cyan)} .cookie-btns{display:flex;gap:8px;flex-shrink:0} @media(max-width:520px){#cookie-banner{flex-direction:column;align-items:flex-start}} /* Error page */ .error-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 24px;text-align:center;flex-direction:column;gap:20px;position:relative;z-index:1} .error-code{font-family:var(--font-hud);font-size:8rem;line-height:1;background:linear-gradient(135deg,var(--red),rgba(255,64,64,.4));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .error-title{font-family:var(--font-hud);font-size:2.2rem;letter-spacing:.06em;color:var(--text-primary)} .error-msg{font-size:.95rem;color:var(--text-secondary);max-width:420px;line-height:1.7} /* ────────────────────────────────────────────── LIVE CHAT WIDGET ────────────────────────────────────────────── */ #live-chat-widget{ position:fixed;bottom:24px;right:24px;z-index:8500; display:flex;flex-direction:column;align-items:flex-end;gap:14px; } #chat-bubble{ width:54px;height:54px;border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--cyan)); border:none;cursor:pointer; display:flex;align-items:center;justify-content:center; box-shadow:0 8px 28px rgba(0,212,255,.35); transition:transform .25s,box-shadow .25s; position:relative;flex-shrink:0; } #chat-bubble:hover{transform:scale(1.08);box-shadow:0 12px 36px rgba(0,212,255,.5)} #chat-bubble svg{width:24px;height:24px;color:#fff} #chat-bubble .unread-badge{ position:absolute;top:-2px;right:-2px; width:18px;height:18px;border-radius:50%; background:var(--red);color:#fff; font-family:var(--font-mono);font-size:.55rem;font-weight:700; display:flex;align-items:center;justify-content:center; border:2px solid var(--void); animation:pulse-dot 2s ease-in-out infinite; } #chat-bubble .unread-badge.hidden{display:none} #chat-panel{ width:340px;max-height:520px; background:var(--panel);border:1px solid var(--border-hi); border-radius:20px;overflow:hidden; box-shadow:0 24px 80px rgba(0,0,0,.7); display:flex;flex-direction:column; animation:chat-in .3s cubic-bezier(0.34,1.4,0.64,1); transform-origin:bottom right; } #chat-panel.hidden{display:none} @keyframes chat-in{from{opacity:0;transform:scale(.85) translateY(16px)}to{opacity:1;transform:none}} .chat-panel-head{ padding:16px 18px;background:linear-gradient(135deg,rgba(29,111,255,.2),rgba(0,212,255,.1)); border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;flex-shrink:0; } .chat-panel-head .online-dot{width:8px;height:8px;border-radius:50%;background:var(--volt);box-shadow:0 0 6px var(--volt-glow);flex-shrink:0;animation:pulse-dot 2.5s ease-in-out infinite} .chat-panel-head-info{flex:1;min-width:0} .chat-panel-head-name{font-size:.875rem;font-weight:600;color:var(--text-primary)} .chat-panel-head-status{font-size:.72rem;color:var(--volt);font-family:var(--font-mono)} .chat-panel-close{background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:6px;width:28px;height:28px;cursor:pointer;color:var(--text-mid);display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s;flex-shrink:0} .chat-panel-close:hover{color:var(--text-primary)} .chat-panel-close svg{width:11px;height:11px} .chat-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;scrollbar-width:thin} .chat-messages::-webkit-scrollbar{width:3px} .chat-messages::-webkit-scrollbar-thumb{background:var(--border-hi);border-radius:2px} .chat-msg{display:flex;flex-direction:column;gap:4px;max-width:85%} .chat-msg.agent{align-self:flex-start} .chat-msg.user{align-self:flex-end;align-items:flex-end} .chat-bubble-msg{padding:10px 14px;border-radius:14px;font-size:.82rem;line-height:1.5} .chat-msg.agent .chat-bubble-msg{background:var(--panel-hi);border:1px solid var(--border);color:var(--text-secondary);border-radius:14px 14px 14px 4px} .chat-msg.user .chat-bubble-msg{background:linear-gradient(135deg,rgba(29,111,255,.35),rgba(0,212,255,.2));border:1px solid rgba(0,212,255,.2);color:var(--text-primary);border-radius:14px 14px 4px 14px} .chat-msg-time{font-family:var(--font-mono);font-size:.56rem;color:var(--text-dim)} .chat-typing{display:flex;gap:5px;align-items:center;padding:4px 0} .chat-typing span{width:6px;height:6px;border-radius:50%;background:var(--text-dim);animation:typing-dot 1.2s ease-in-out infinite} .chat-typing span:nth-child(2){animation-delay:.2s} .chat-typing span:nth-child(3){animation-delay:.4s} @keyframes typing-dot{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}} .chat-input-row{padding:12px 14px;border-top:1px solid var(--border);display:flex;gap:10px;align-items:center;flex-shrink:0} .chat-input-row input{ flex:1;background:var(--surface);border:1px solid var(--border-hi); border-radius:20px;padding:9px 14px;font-size:.82rem;color:var(--text); outline:none;transition:border-color .2s; } .chat-input-row input:focus{border-color:rgba(0,212,255,.4)} .chat-input-row input::placeholder{color:var(--text-dim)} .chat-send-btn{width:34px;height:34px;border-radius:50%;background:var(--blue);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;transition:background .2s,transform .2s;flex-shrink:0} .chat-send-btn:hover{background:var(--blue-light);transform:scale(1.08)} .chat-send-btn svg{width:15px;height:15px} .chat-panel-tabs{display:flex;border-bottom:1px solid var(--border);flex-shrink:0} .chat-tab{flex:1;padding:10px;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;background:transparent;border:none;color:var(--text-dim);cursor:pointer;transition:color .2s,background .2s;border-bottom:2px solid transparent} .chat-tab.active{color:var(--cyan);border-bottom-color:var(--cyan);background:rgba(0,212,255,.03)} .chat-email-form{padding:16px;display:flex;flex-direction:column;gap:12px;flex:1;overflow-y:auto} .chat-email-form input,.chat-email-form textarea,.chat-email-form select{ background:var(--surface);border:1px solid var(--border-hi);border-radius:var(--radius-sm); padding:10px 12px;font-size:.82rem;color:var(--text);outline:none; transition:border-color .2s;font-family:var(--font-body);width:100%; } .chat-email-form input:focus,.chat-email-form textarea:focus,.chat-email-form select:focus{border-color:rgba(0,212,255,.4)} .chat-email-form textarea{resize:none;height:90px} .chat-email-form label{font-family:var(--font-mono);font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);display:block;margin-bottom:4px} .chat-submit-btn{background:linear-gradient(135deg,var(--blue),var(--cyan));border:none;border-radius:var(--radius-sm);padding:11px 18px;font-family:var(--font-hud);font-size:.75rem;letter-spacing:.1em;color:#fff;cursor:pointer;transition:opacity .2s,transform .2s;display:flex;align-items:center;justify-content:center;gap:8px} .chat-submit-btn:hover{opacity:.88;transform:translateY(-1px)} .chat-submit-btn:disabled{opacity:.5;cursor:not-allowed;transform:none} @media(max-width:420px){ #chat-panel{width:calc(100vw - 32px);max-height:70vh} #live-chat-widget{bottom:16px;right:16px} } /* ── Pricings in dashboard ── */ .pcard{position:relative;background:var(--panel);border-radius:14px;border:1px solid var(--border);overflow:hidden;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s,border-color .3s} .pcard:hover{transform:translateY(-5px);box-shadow:0 20px 50px rgba(0,0,0,.45)} .pcard.featured{border-color:rgba(0,212,255,.3);background:linear-gradient(170deg,rgba(0,212,255,.07),var(--panel) 40%)} .pcard.featured:hover{border-color:rgba(0,212,255,.5);box-shadow:0 20px 50px rgba(0,212,255,.14)} .pcard-ribbon{position:absolute;top:0;right:0;background:linear-gradient(135deg,var(--cyan),rgba(0,212,255,.6));color:#020508;font-family:var(--font-hud);font-size:.52rem;letter-spacing:.1em;text-transform:uppercase;padding:5px 20px 5px 12px;clip-path:polygon(0 0,100% 0,100% 100%,10px 100%)} .pcard-body{padding:22px 20px;display:flex;flex-direction:column;flex:1;position:relative;z-index:1} .pcard-badge{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:3px;margin-bottom:12px;width:fit-content;background:var(--blue-subtle);color:var(--blue-light);border:1px solid rgba(29,111,255,.25)} .pcard-name{font-family:var(--font-hud);font-size:1.35rem;letter-spacing:.08em;color:var(--text-primary);margin-bottom:3px} .pcard-desc{font-size:.77rem;color:var(--text-mid);margin-bottom:14px;line-height:1.5} .pcard-price-row{display:flex;align-items:baseline;gap:2px;margin-bottom:2px} .pcard-cur{font-family:var(--font-mono);font-size:.78rem;color:var(--text-mid)} .pcard-amt{font-family:var(--font-hud);font-size:2.4rem;line-height:1;color:var(--text-primary)} .pcard-period{font-family:var(--font-mono);font-size:.62rem;color:var(--text-dim)} .pcard-note{font-family:var(--font-mono);font-size:.56rem;color:var(--text-dim);margin-bottom:10px} .annual-chip{display:none;align-items:center;gap:7px;background:linear-gradient(135deg,rgba(0,255,157,.06),rgba(0,212,255,.04));border:1px solid rgba(0,255,157,.2);border-radius:6px;padding:6px 10px;margin-bottom:10px} .annual-chip.show{display:flex} .ac-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);display:block} .ac-amount{font-family:var(--font-hud);font-size:.95rem;color:var(--volt)} .ac-save{font-family:var(--font-mono);font-size:.52rem;color:var(--green-light);background:rgba(0,225,122,.1);border:1px solid rgba(0,225,122,.2);border-radius:20px;padding:2px 6px} .pcard-divider{height:1px;background:linear-gradient(90deg,transparent,var(--border-hi),transparent);margin:10px 0} .pcard-feats{flex:1;display:flex;flex-direction:column;gap:7px;margin-bottom:14px} .pcard-feat{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--text-mid)} .pcard-feat.unavail{opacity:.3;text-decoration:line-through} .pcard-feat-icon{width:15px;height:15px;border-radius:3px;flex-shrink:0;display:flex;align-items:center;justify-content:center} .pcard-feat-icon.fi-yes{background:rgba(0,255,157,.1);color:var(--volt);border:1px solid rgba(0,255,157,.25)} .pcard-feat-icon.fi-no{background:rgba(255,255,255,.04);color:var(--text-dim);border:1px solid var(--border)} .pcard-feat-icon svg{width:9px;height:9px} .pcard-cta{display:flex;width:100%;align-items:center;justify-content:center;gap:6px;font-family:var(--font-hud);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;padding:10px 16px;border-radius:6px;cursor:pointer;transition:transform .22s,box-shadow .22s;background:linear-gradient(135deg,rgba(29,111,255,.2),rgba(29,111,255,.06));border:1px solid rgba(29,111,255,.4);color:var(--blue-light)} .pcard-cta:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 0 22px rgba(29,111,255,.3)} .pcard-cta:disabled,.pcard-cta.current-plan{opacity:.55;cursor:not-allowed;transform:none!important;box-shadow:none!important} .pcard-cta svg{width:11px;height:11px;flex-shrink:0} /* ── Plan CTA states (current / upgrade / downgrade / pending) ── */ .pcard-cta.upgrade-cta{background:linear-gradient(135deg,rgba(0,225,122,.22),rgba(0,225,122,.06));border-color:rgba(0,225,122,.5);color:var(--green-light)} .pcard-cta.upgrade-cta:hover:not(:disabled){box-shadow:0 0 22px rgba(0,225,122,.32)} .pcard-cta.downgrade-cta{background:rgba(255,255,255,.03);border-color:var(--border-hi);color:var(--text-mid)} .pcard-cta.downgrade-cta:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 0 16px rgba(255,255,255,.06);color:var(--text-primary)} .pcard-cta.current-plan{opacity:1!important;cursor:default;background:rgba(0,225,122,.10);border:1px solid rgba(0,225,122,.45);color:var(--green-light)} .pcard-cta.pending-cta{opacity:.85;cursor:wait;background:rgba(255,196,0,.07);border-color:rgba(255,196,0,.35);color:#ffc861} /* Highlight the plan card the user is currently on */ .pcard.is-current{border-color:rgba(0,225,122,.5);box-shadow:0 0 0 1px rgba(0,225,122,.25),0 18px 46px rgba(0,225,122,.12)} .pcard.is-current:hover{box-shadow:0 0 0 1px rgba(0,225,122,.35),0 22px 52px rgba(0,225,122,.18)} .pcard-current-tag{position:absolute;top:0;right:0;background:linear-gradient(135deg,rgba(0,225,122,.95),rgba(0,255,157,.9));color:#04140c;font-family:var(--font-mono);font-size:.5rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:4px 11px;border-bottom-left-radius:9px;z-index:3} .plan-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:18px} .plan-grid-storage{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:8px} @media(max-width:960px){.plan-grid-3,.plan-grid-storage{grid-template-columns:1fr;max-width:400px}} .tier-label{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);margin:20px 0 8px;display:flex;align-items:center;gap:10px} .tier-label::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--border-hi),transparent)} /* Profile avatar */ .avatar-section{display:flex;align-items:center;gap:20px;margin-bottom:26px;padding-bottom:26px;border-bottom:1px solid var(--border);flex-wrap:wrap} .avatar-large{width:76px;height:76px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--cyan));display:flex;align-items:center;justify-content:center;font-family:var(--font-hud);font-size:1.9rem;color:#fff;flex-shrink:0;overflow:hidden;border:2px solid rgba(0,212,255,.3);position:relative;cursor:pointer} .avatar-large img{width:100%;height:100%;object-fit:cover} .avatar-overlay{position:absolute;inset:0;border-radius:50%;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s} .avatar-large:hover .avatar-overlay{opacity:1} .avatar-overlay svg{width:20px;height:20px;color:#fff} .avatar-info h3{font-size:.95rem;font-weight:600;color:var(--text-primary);margin-bottom:3px} .avatar-info p{font-size:.78rem;color:var(--text-muted)} /* Hosting file items */ .hosting-file-item{display:flex;align-items:center;gap:14px;padding:11px 16px;border-bottom:1px solid var(--border);transition:background var(--tr)} .hosting-file-item:last-child{border-bottom:none} .hosting-file-item:hover{background:rgba(29,111,255,.03)} .hfi-icon{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .hfi-icon svg{width:17px;height:17px} .hfi-name{flex:1;font-size:.875rem;color:var(--text-primary);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hfi-size{font-family:var(--font-mono);font-size:.62rem;color:var(--text-dim);flex-shrink:0} .hfi-actions{display:flex;gap:6px;flex-shrink:0} /* Cancellation card */ .cancel-req-card{background:rgba(255,168,32,.05);border:1px solid rgba(255,168,32,.25);border-radius:var(--radius-sm);padding:14px 18px;display:flex;align-items:flex-start;gap:14px;margin-bottom:12px} .cancel-req-icon{width:34px;height:34px;border-radius:50%;background:var(--amber-dim);display:flex;align-items:center;justify-content:center;flex-shrink:0} .cancel-req-icon svg{width:17px;height:17px;color:var(--amber)} .cancel-req-title{font-size:.875rem;font-weight:600;color:var(--text-primary);margin-bottom:2px} .cancel-req-sub{font-size:.78rem;color:var(--text-muted)} /* File grid tiles */ .file-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap} .file-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px} .file-tile{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px 14px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;transition:border-color var(--tr),transform var(--tr);position:relative;text-align:center} .file-tile:hover{border-color:var(--border-hi);transform:translateY(-2px)} .file-tile:hover .file-tile-actions{opacity:1} .file-tile-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center} .file-tile-icon svg{width:22px;height:22px} .file-tile-name{font-size:.78rem;color:var(--text-primary);word-break:break-all;line-height:1.4} .file-tile-size{font-family:var(--font-mono);font-size:.6rem;color:var(--text-dim)} .file-tile-actions{position:absolute;top:6px;right:6px;display:flex;gap:4px;opacity:0;transition:opacity var(--tr)} .file-tile-actions button{width:24px;height:24px;border-radius:5px;background:var(--surface);border:1px solid var(--border-hi);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-mid);transition:color var(--tr)} .file-tile-actions button:hover{color:var(--text-primary)} .file-tile-actions button svg{width:11px;height:11px} /* ── Responsive utility ── */ @media(max-width:480px){ .container{padding:0 16px} .card{padding:16px} .modal-body{padding:18px} .btn-lg{padding:12px 22px;font-size:.88rem} .stat-cards{grid-template-columns:1fr 1fr} } /* ══ INSTANT FEEDBACK — global ══ */ .btn{transition:opacity .12s,transform .1s,background .15s,box-shadow .15s !important} .btn:active{transform:scale(.97) !important} .nav-item{transition:color .1s,background .1s !important} .nav-item:active{transform:translateX(2px)} .stat-card{transition:transform .15s,box-shadow .15s,border-color .15s} .card{transition:border-color .2s} .vault-file-card,.fm-grid-card,.vault-folder-card{transition:border-color .15s,transform .15s,box-shadow .15s !important} .vault-list-row,.fm-row{transition:background .1s,border-color .1s !important} .ob-step{transition:border-color .2s,opacity .3s,background .2s !important} .ob-step.done{border-color:rgba(0,255,157,.25) !important;background:rgba(0,255,157,.03) !important} .ob-step-num{transition:background .3s,border-color .3s,color .3s !important} /* Panel enter animation - fast and clean */ @keyframes panel-enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} .dash-panel.active{animation:panel-enter .18s cubic-bezier(.16,1,.3,1) forwards !important}.card-templates:hover{transform:translateY(-7px) scale(1.012);z-index:2;border-color:rgba(0,255,157,.5);box-shadow:0 24px 60px rgba(0,255,157,.17)} .card-glow-volt{background:radial-gradient(ellipse 80% 55% at 50% 0%,rgba(0,255,157,.11),transparent 70%)} .icon-volt{background:rgba(0,255,157,.08);color:var(--volt);border:1px solid rgba(0,255,157,.2)} .tag-volt{background:rgba(0,255,157,.08);color:var(--volt);border:1px solid rgba(0,255,157,.2)} .dot-volt-p{background:var(--volt);box-shadow:0 0 5px var(--volt)} .btn-volt-c{background:var(--volt);color:#021a0b} /* Storage multi-select */ .kv-stor-card.stor-selected { border-color:rgba(245,158,11,.6) !important; background:rgba(245,158,11,.06) !important; box-shadow:0 0 0 2px rgba(245,158,11,.15); } .kv-stor-list-row.stor-selected { background:rgba(245,158,11,.06) !important; border-color:rgba(245,158,11,.3) !important; } .kv-stor-card.stor-selected::after { content:'✓'; position:absolute; top:6px; left:6px; width:18px; height:18px; border-radius:50%; background:var(--gold); color:#1a0f00; font-size:.7rem; font-weight:800; display:flex; align-items:center; justify-content:center; line-height:18px; text-align:center; } /* Checkbox tick is driven entirely by the .stor-selected row class (keeps single-click, Select All and Clear in sync) */ .stor-cb{position:relative} .stor-selected .stor-cb{background:var(--gold)!important;border-color:var(--gold)!important} .stor-selected .stor-cb::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#1a0f00;font-size:.7rem;font-weight:900;line-height:1} /* ══ Compact storage file list rows ══ */ .vault-list{display:flex;flex-direction:column;gap:4px} .kv-stor-list-row{display:grid;grid-template-columns:18px 30px minmax(0,1fr) 70px 64px auto;align-items:center;gap:12px;height:46px;padding:0 14px;border-radius:8px;border:1px solid var(--border);background:rgba(255,255,255,.015);cursor:pointer} .kv-stor-list-row:hover{background:rgba(245,158,11,.05);border-color:rgba(245,158,11,.28)} .kv-stor-list-icon{width:30px;height:30px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .kv-stor-list-icon svg{width:15px;height:15px} .kv-stor-list-name{font-size:.82rem;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .kv-stor-list-size{font-family:var(--font-mono);font-size:.66rem;color:var(--text-dim);text-align:right;white-space:nowrap} .kv-stor-list-date{font-family:var(--font-mono);font-size:.66rem;color:var(--text-dim);text-align:right;white-space:nowrap} .kv-stor-list-actions{display:flex;align-items:center;gap:5px;justify-self:end} .kv-stor-list-actions .kv-stor-card-btn{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border);color:var(--text-mid);cursor:pointer;transition:all .12s;flex-shrink:0} .kv-stor-list-actions .kv-stor-card-btn:hover{border-color:var(--gold);color:var(--gold);background:rgba(245,158,11,.08)} .kv-stor-list-actions .kv-stor-card-btn.del:hover{border-color:var(--red);color:var(--red);background:rgba(255,64,64,.08)} /* Reveal actions on hover for pointer devices; always show on touch */ @media(hover:hover){ .kv-stor-list-actions{opacity:0;transition:opacity .12s} .kv-stor-list-row:hover .kv-stor-list-actions{opacity:1} } /* Mobile: drop the date column, tighten */ @media(max-width:640px){ .kv-stor-list-row{grid-template-columns:18px 28px minmax(0,1fr) auto auto;gap:10px;height:44px;padding:0 10px} .kv-stor-list-date{display:none} .kv-stor-list-actions{opacity:1} } /* ══ STUDIO (Done-For-You) gold accent — reusable card tokens ══ */ .card-studio:hover{transform:translateY(-7px) scale(1.012);z-index:2;border-color:rgba(245,158,11,.5);box-shadow:0 24px 60px rgba(245,158,11,.17)} .card-glow-gold{background:radial-gradient(ellipse 80% 55% at 50% 0%,rgba(245,158,11,.13),transparent 70%)} .icon-gold{background:var(--gold-dim);color:var(--gold);border:1px solid rgba(245,158,11,.22)} .tag-gold{background:var(--gold-dim);color:var(--gold);border:1px solid rgba(245,158,11,.22)} .dot-gold-p{background:var(--gold);box-shadow:0 0 5px var(--gold)} .btn-gold-c{background:var(--gold);color:#1a0f00} /* ══ WEB BUILDER / STUDIO violet accent — reusable card tokens ══ */ .card-builder:hover{transform:translateY(-7px) scale(1.012);z-index:2;border-color:rgba(168,85,247,.5);box-shadow:0 24px 60px rgba(168,85,247,.17)} .card-glow-violet{background:radial-gradient(ellipse 80% 55% at 50% 0%,rgba(168,85,247,.14),transparent 70%)} .icon-violet{background:var(--violet-subtle);color:var(--violet-light);border:1px solid rgba(168,85,247,.22)} .tag-violet{background:var(--violet-subtle);color:var(--violet-light);border:1px solid rgba(168,85,247,.22)} .dot-violet-p{background:var(--violet);box-shadow:0 0 5px var(--violet)} .btn-violet-c{background:var(--violet);color:#fff} /* ══ Studio dashboard: status tracker + brief form ══ */ .studio-tracker{display:flex;align-items:flex-start;margin:22px 0 4px} .st-step{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0} .st-dot{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:.75rem;font-weight:600;border:1.5px solid var(--border-hi);color:var(--text-muted);background:var(--surface)} .st-label{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)} .st-bar{flex:1;height:2px;background:var(--border-hi);margin:14px 6px 0} .st-done .st-dot{background:var(--violet);border-color:var(--violet);color:#fff} .st-done .st-label{color:var(--text-secondary)} .st-active .st-dot{border-color:var(--violet);color:var(--violet);box-shadow:0 0 0 4px var(--violet-subtle)} .st-active .st-label{color:var(--violet)} .bf-section{margin-top:18px;padding-top:16px;border-top:1px solid var(--border)} .bf-section-title{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--violet);margin-bottom:12px} .bf-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} .bf-field{display:flex;flex-direction:column;gap:6px} .bf-field.full{grid-column:1/-1} .bf-label{font-size:.78rem;color:var(--text-secondary)} .bf-input{width:100%;background:var(--surface);border:1px solid var(--border-hi);border-radius:var(--radius-sm);color:var(--text-primary);font-size:.85rem;padding:10px 12px;font-family:inherit;outline:none;transition:border-color .2s} .bf-input:focus{border-color:var(--violet)} textarea.bf-input{min-height:70px;resize:vertical} .bf-checks{display:flex;flex-wrap:wrap;gap:8px} .bf-check{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;color:var(--text-secondary);background:var(--surface);border:1px solid var(--border-hi);border-radius:50px;padding:7px 13px;cursor:pointer} .bf-check input{accent-color:var(--violet)} .bf-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px} @media(max-width:640px){.bf-grid{grid-template-columns:1fr}}