:root { --primary: #14d7ff; --primary-dark: #009fdd; --secondary: #1ec676; --bg-start: #151d26; --bg-end: #233349; --text-primary: #e9f8ff; --text-muted: #8edcff; --card-bg: rgba(21, 32, 48, 0.99); --card-border: rgba(255, 255, 255, 0.12); --shadow-color: rgba(0, 0, 0, 0.8); --blur: 16px; } body.dark-mode { --primary: #79b8ff; --primary-dark: #4180d0; --secondary: #2ea043; --bg-start: #0d1117; --bg-end: #161b22; --text-primary: #c9d1d9; --text-muted: #8b949e; --card-bg: rgba(255, 255, 255, 0.05); --card-border: rgba(255, 255, 255, 0.12); --shadow-color: rgba(0, 0, 0, 0.8); } body.dark-mode::before { opacity: 0.05; } body::before, #home::before { background: none !important; opacity: 0 !important; } body.dark-mode .navbar { background: rgba(13, 17, 23, 0.85); border-bottom: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: 'Inter', 'Poppins', sans-serif; color: var(--text-primary); background: linear-gradient(135deg, var(--bg-start) 0%, var(--bg-end) 100%); min-height: 100vh; line-height: 1.6; } body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: none !important; opacity: 0 !important; pointer-events: none; z-index: -1; } #home::before { background: none !important; opacity: 0 !important; pointer-events: none !important; } a { color: var(--primary); text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--primary-dark); } h1, h2, h3, h4, h5 { margin: 0 0 0.5em 0; font-weight: 700; color: var(--primary-dark); line-height: 1.2; } p { margin: 0 0 1em; color: var(--text-muted); } .core-btn, .cta-btn { display: inline-block; padding: 0.75em 2em; font-weight: 600; border-radius: 32px; border: none; cursor: pointer; background: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 100%); color: #fff; box-shadow: 0 6px 18px var(--primary)44; transition: transform 0.2s ease, box-shadow 0.3s ease, background 0.3s ease; } .cta-btn.secondary { background: transparent; color: var(--primary); border: 2px solid var(--primary); box-shadow: none; } .core-btn:hover, .cta-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px var(--primary)33; } .cta-btn.secondary:hover { background: var(--primary); color: #fff; box-shadow: 0 10px 24px var(--primary)33; } .navbar { position: sticky; top: 0; width: 100%; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 0 4vw; height: 72px; backdrop-filter: blur(var(--blur)); background: rgba(21, 32, 48, 0.95) !important; border-bottom: 1px solid var(--card-border) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.75) !important; } .navbar .logo { color: var(--primary) !important; } .navbar .logo-beta { background: var(--primary) !important; color: #fff !important; } .nav-links a { color: var(--text-primary) !important; } .nav-links a:hover, .nav-links a.active { color: var(--primary) !important; } .nav-links a:hover::after, .nav-links a.active::after { background: var(--primary) !important; } .demo-section, .core-container, .arbo-container, .socket-container, .tracker-container, .popup-content, .white-hero, .panel, .section.backup-ui { background: var(--card-bg) !important; border-color: var(--card-border) !important; color: var(--text-primary) !important; } .demo-section h2, .popup-content h3, .core-container .tip, .arbo-container .tip { color: var(--primary) !important; } .demo-desc, .demo-section ul, .popup-content pre, .confidentiality { color: var(--text-primary) !important; } .demo-section code, .popup-content pre { background: rgba(255,255,255,0.05) !important; color: var(--primary-dark) !important; } .core-btn, .custom-file-label, .module-link, .module-demo-btn { background: linear-gradient(90deg, var(--primary), var(--primary-dark)) !important; color: #fff !important; box-shadow: 0 2px 9px var(--primary-dark)25 !important; } .core-btn.green { background: linear-gradient(90deg, #1ec676, #14b862) !important; } .core-btn.red { background: linear-gradient(90deg, #e93363, #ad002a) !important; } .core-btn.blue { background: linear-gradient(90deg, var(--primary), var(--primary-dark)) !important; } html, body { overflow-x: auto; -webkit-overflow-scrolling: touch; } body::-webkit-scrollbar { height: 10px; width: 10px; } body::-webkit-scrollbar-track { background: rgba(0,0,0,0.12); } body::-webkit-scrollbar-thumb { background: var(--primary, #21c8ff); border-radius: 10px; border: 2px solid transparent; background-clip: content-box; } body::-webkit-scrollbar-thumb:hover { background: var(--primary-dark, #0aa3e3); } * { scrollbar-color: var(--primary, #21c8ff) rgba(0,0,0,0.12); scrollbar-width: thin; } .dropdown-select:focus { outline: 2px solid var(--primary) !important; } .show-files-btn { border-color: var(--primary) !important; color: var(--primary) !important; } .show-files-btn:hover { background: rgba(255,255,255,0.05) !important; color: var(--primary) !important; } .upload-warning { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.15) !important; color: #ff6666 !important; } .dropdown .dropbtn { color: var(--text-primary) !important; } .dropdown-content { backdrop-filter: blur(16px) !important; background: var(--card-bg) !important; border: 1px solid var(--card-border) !important; box-shadow: 0 6px 20px rgba(0,0,0,0.6) !important; border-radius: 0 0 10px 10px !important; } .dropdown-content a { color: var(--text-primary) !important; } .dropdown-content a:hover, .dropdown-content a.active { background: rgba(255,255,255,0.05) !important; color: var(--primary) !important; } .lang-switch { background: rgba(21,32,48,0.8) !important; border: 1px solid var(--card-border) !important; border-radius: 8px !important; color: var(--primary) !important; box-shadow: 0 2px 6px rgba(0,0,0,0.4) !important; } .lang-menu { backdrop-filter: blur(16px) !important; background: rgba(21,32,48,0.95) !important; border: 1px solid var(--card-border) !important; box-shadow: 0 6px 24px rgba(0,0,0,0.6) !important; } .lang-option { color: var(--text-primary) !important; } .lang-option:hover { background: rgba(255,255,255,0.05) !important; color: var(--primary) !important; } [class$="-container"] { background: var(--card-bg) !important; border-color: var(--card-border) !important; color: var(--text-primary) !important; box-shadow: 0 3px 15px var(--shadow-color) !important; } input[type="text"], input[type="search"], input[type="file"], input[type="password"], select, textarea { background: #101b2b !important; color: var(--text-primary) !important; border-color: var(--primary) !important; } input[type="text"]:focus, input[type="search"]:focus, input[type="file"]:focus, input[type="password"]:focus, select:focus, textarea:focus { background: #16243c !important; border-color: var(--primary) !important; color: #fff !important; } .navbar .logo { font-size: 1.6em; color: var(--primary); font-weight: 700; display: flex; align-items: center; } .navbar .logo-beta { background: var(--primary); color: #fff; padding: 2px 6px; border-radius: 6px; margin-left: 6px; font-size: 0.65em; letter-spacing: 0.05em; } .nav-links { display: flex; gap: 1.5em; list-style: none; margin: 0; padding: 0; } .nav-links a { display: block; padding: 0.3em 0.8em; font-weight: 600; color: var(--text-primary) !important; position: relative; transition: color 0.2s ease; } .nav-links a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--primary) !important; transition: width 0.3s ease; } .nav-links a:hover::after, .nav-links a.active::after { width: 100%; } .nav-links a:hover, .nav-links a.active { color: var(--primary) !important; } .lang-switch { background: rgba(255,255,255,0.65); border: 1px solid var(--card-border); border-radius: 8px; box-shadow: 0 2px 6px var(--shadow-color); padding: 6px 12px; display: flex; align-items: center; gap: 6px; color: var(--primary); cursor: pointer; transition: box-shadow 0.2s ease; } .lang-switch:hover { box-shadow: 0 4px 12px var(--shadow-color); } .lang-menu { backdrop-filter: blur(var(--blur)); background: rgba(255,255,255,0.7); border: 1px solid var(--card-border); border-radius: 8px; box-shadow: 0 4px 16px var(--shadow-color); overflow: hidden; } .lang-option:hover { background: rgba(0,0,0,0.05); } section { padding: 4rem 6vw; } .confidentiality { margin-top: 4rem; font-size: 0.9rem; color: var(--text-muted); text-align: center; } .confidentiality b { color: var(--primary-dark); } .glass-card { background: var(--card-bg); backdrop-filter: blur(var(--blur)); border: 1px solid var(--card-border); box-shadow: 0 8px 24px var(--shadow-color); border-radius: 20px; padding: 2rem; } .glass-card:hover { transform: translateY(-6px); box-shadow: 0 12px 32px var(--shadow-color); transition: transform 0.3s cubic-bezier(.24,.92,.57,1.32), box-shadow 0.3s; } #core-footer { margin-top: 4rem; text-align: center; font-size: 0.95rem; color: var(--text-muted); padding-bottom: 2rem; } #core-footer a { color: var(--primary-dark); text-decoration: underline; margin: 0 0.7rem; transition: color 0.2s ease; } #core-footer a:hover { color: var(--primary); } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.3); } ::-webkit-scrollbar-thumb { background-color: var(--primary); border-radius: 10px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background-color: var(--primary-dark); } @media (max-width: 768px) { .navbar { padding: 0 6vw; height: 64px; } .nav-links { gap: 1em; } section { padding: 3rem 5vw; } } .custom-file-label { background: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 100%) !important; color: #fff !important; box-shadow: 0 2px 7px var(--primary)33 !important; border: none !important; } .custom-file-label:hover, .custom-file-label:focus { background: var(--primary) !important; color: #fff !important; } .custom-file-label.disabled { background: #2e3a4f !important; color: #777 !important; opacity: 0.6 !important; pointer-events: none !important; } .core-container button, .arbo-container button, .socket-container button, .tracker-container button, .core-btn { background: linear-gradient(90deg, var(--primary), var(--primary-dark)) !important; color: #fff !important; border: none !important; box-shadow: 0 2px 7px var(--primary)33 !important; } .core-container button:hover, .arbo-container button:hover, .socket-container button:hover, .tracker-container button:hover, .core-btn:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 16px var(--primary)55 !important; background: linear-gradient(90deg, var(--primary-dark), var(--primary)) !important; } select.dropdown-select, .dropdown-select { background: #101b2b !important; color: var(--text-primary) !important; border-color: var(--primary) !important; appearance: none !important; } select.dropdown-select:focus, .dropdown-select:focus { outline: 2px solid var(--primary) !important; } .file-count, .tip { color: var(--primary) !important; } .show-files-btn { background: transparent !important; border: 1.5px solid var(--primary) !important; color: var(--primary) !important; border-radius: 13px !important; font-weight: 700 !important; transition: all 0.13s !important; } .show-files-btn:hover { background: rgba(255, 255, 255, 0.05) !important; color: var(--primary-dark) !important; border-color: var(--primary-dark) !important; } .popup-content { background: var(--card-bg) !important; color: var(--text-primary) !important; border: 1px solid var(--card-border) !important; box-shadow: 0 7px 24px var(--shadow-color) !important; } .popup-content h3 { color: var(--primary) !important; } .popup-content pre { background: #101b2b !important; color: var(--text-primary) !important; border-radius: 8px !important; padding: 14px 8px !important; border: 1px solid var(--card-border) !important; } .popup-content pre::-webkit-scrollbar-thumb { background: var(--primary) !important; } .popup-content pre::-webkit-scrollbar-track { background: #16243c !important; } .popup-overlay { background: rgba(0, 0, 0, 0.6) !important; } .upload-warning { color: #ff7373 !important; background: rgba(255, 0, 0, 0.12) !important; border: 1.3px solid rgba(255, 0, 0, 0.3) !important; border-radius: 7px !important; } .highlight { background: rgba(20, 215, 255, 0.2) !important; color: var(--primary) !important; font-weight: 700 !important; border-radius: 7px !important; padding: 0 3px !important; } .lang-switch { background: rgba(21, 32, 48, 0.85) !important; border: 1px solid var(--card-border) !important; color: var(--primary) !important; } .lang-switch:hover { box-shadow: 0 4px 12px var(--shadow-color) !important; } .lang-menu { background: rgba(21, 32, 48, 0.95) !important; border: 1px solid var(--card-border) !important; box-shadow: 0 6px 24px var(--shadow-color) !important; } .lang-option { color: var(--text-primary) !important; } .lang-option:hover { background: rgba(255, 255, 255, 0.05) !important; color: var(--primary) !important; } :root{ --primary: #21c8ff; --primary-dark:#0aa3e3; --secondary:#37f0b1; --bg-start:#0b1220; --bg-end:#0a0e16; --text:#e6f0ff; --text-muted:#a6b4cd; --card-bg: rgba(255,255,255,.04); --card-border: rgba(255,255,255,.10); --shadow-color: rgba(0,0,0,.40); --blur: 12px; } html,body{ background: radial-gradient(1200px 800px at 10% -10%, rgba(33,200,255,.08), transparent 55%), radial-gradient(900px 700px at 95% 10%, rgba(55,240,177,.07), transparent 45%), linear-gradient(180deg, var(--bg-start), var(--bg-end)); color: var(--text); } .navbar, #navbar .navbar{ background: linear-gradient(180deg, rgba(3,10,22,.88), rgba(3,10,22,.55)); border-bottom: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(14px) saturate(120%); box-shadow: 0 10px 30px rgba(0,0,0,.35); } .navbar a { color: #dbe9ff } :focus-visible{ outline:2px solid #2b95ff; outline-offset:3px } .popup-overlay{ background: rgba(4,11,20,0.66) !important; backdrop-filter: blur(10px) saturate(115%) !important; position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 9999; } .popup-overlay .popup-content{ background: linear-gradient(180deg, rgba(22,28,42,.98), rgba(12,18,30,.98)) !important; color: var(--text-primary, #e9f8ff) !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 16px !important; box-shadow: 0 20px 60px rgba(0,0,0,.55) !important; text-align: left !important; } .popup-overlay .popup-content h3{ color: var(--primary, #14d7ff) !important; margin: 0 0 8px 0; } .popup-overlay .popup-content input, .popup-overlay .popup-content select, .popup-overlay .popup-content button{ background: rgba(255,255,255,.06) !important; color: var(--text-primary, #e9f8ff) !important; border: 1px solid rgba(255,255,255,.16) !important; border-radius: 10px !important; } .popup-overlay .popup-content button:hover{ background: rgba(255,255,255,.12) !important } .navbar{ backdrop-filter: blur(14px) saturate(120%) !important; background: linear-gradient(180deg, rgba(3,10,22,.86), rgba(3,10,22,.55)) !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; box-shadow: 0 10px 30px rgba(0,0,0,.35) !important; } .navbar .brand, .navbar .nav-links a{ color:#e9f4ff !important; } .navbar .nav-links a:hover, .navbar .nav-links .active{ color: var(--primary, #14d7ff) !important; } .dropdown-content{ background: rgba(8,14,26,.96) !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: 0 18px 50px rgba(0,0,0,.45) !important; backdrop-filter: blur(12px) !important; } .dropdown-content a{ color:#e6f0ff !important; } .dropdown-content a:hover{ background: rgba(255,255,255,.06) !important; color: #bfe6ff !important; } .lang-switch, .lang-chip{ background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.16) !important; color:#e9f4ff !important; } body::before, #home::before { background: none !important; opacity: 0 !important; pointer-events: none !important; }