/* ================================================================ * THEMES โ€” ๐ŸŒ™ Dark (index.html ka base) ยท ๐ŸŒŒ Neon Cyber ยท ๐ŸŒ† Synthwave ยท ๐Ÿ’š Matrix * โ€” ๐Ÿ‘ค menu / Settings โ†’ Mera account se badlo * ================================================================ */ /* ---------- rang (har neon theme ke apne) ---------- */ html[data-theme="neon"]{ --bg:#04050d; --panel:rgba(12,17,38,.80); --panel2:rgba(17,24,52,.86); --line:rgba(0,229,255,.20); --line2:rgba(0,229,255,.58); --text:#e9f8ff; --dim:#8fa6c9; --accent:#00e5ff; --accent2:#ff2bd6; --on-accent:#02060f; --ok:#3dffa2; --warn:#ffd23f; --bad:#ff4d7d; --glow-a:rgba(0,229,255,.55); --glow-b:rgba(255,43,214,.50); --header-bg:rgba(4,5,13,.74); --code-bg:rgba(0,229,255,.09); --grid-line:rgba(0,229,255,.17); --bg-grad: radial-gradient(1100px 600px at 8% -12%, rgba(255,43,214,.20), transparent 60%), radial-gradient(900px 520px at 108% 8%, rgba(0,229,255,.18), transparent 60%), linear-gradient(180deg, #04050d 0%, #070b1f 55%, #0b0522 100%); } html[data-theme="synthwave"]{ --bg:#0d0221; --panel:rgba(32,7,60,.80); --panel2:rgba(46,11,82,.86); --line:rgba(255,79,216,.24); --line2:rgba(255,79,216,.62); --text:#fff1fb; --dim:#c6a6d8; --accent:#ff4fd8; --accent2:#ffb347; --on-accent:#1a0014; --ok:#5dfdcb; --warn:#ffd166; --bad:#ff5c8a; --glow-a:rgba(255,79,216,.55); --glow-b:rgba(255,179,71,.45); --header-bg:rgba(13,2,33,.74); --code-bg:rgba(255,79,216,.10); --grid-line:rgba(255,79,216,.24); --bg-grad: radial-gradient(640px 360px at 50% 108%, rgba(255,120,60,.38), transparent 65%), radial-gradient(1100px 620px at 50% -22%, rgba(170,50,255,.30), transparent 60%), linear-gradient(180deg, #0d0221 0%, #1a0536 60%, #2b0a3d 100%); } html[data-theme="matrix"]{ --bg:#010805; --panel:rgba(2,20,10,.84); --panel2:rgba(4,30,15,.88); --line:rgba(57,255,20,.20); --line2:rgba(57,255,20,.58); --text:#d7ffe0; --dim:#7dbd8f; --accent:#39ff14; --accent2:#00ffa3; --on-accent:#001a05; --ok:#39ff14; --warn:#e6ff4d; --bad:#ff5555; --glow-a:rgba(57,255,20,.50); --glow-b:rgba(0,255,163,.40); --header-bg:rgba(1,8,5,.80); --code-bg:rgba(57,255,20,.08); --grid-line:rgba(57,255,20,.07); --bg-grad: radial-gradient(1000px 600px at 50% -10%, rgba(57,255,20,.12), transparent 60%), linear-gradient(180deg, #010805, #02110a); --font:ui-monospace,"Cascadia Code","JetBrains Mono",SFMono-Regular,Menlo,Consolas,"Nirmala UI","Noto Sans Gujarati","Noto Sans Devanagari",monospace; } /* ---------- background: glow + chalti hui grid + scanlines ---------- */ html.neon-ui{ --radius:14px; color-scheme:dark; } html.neon-ui body{ background:var(--bg-grad), var(--bg); background-attachment:fixed; } html.neon-ui body::before{ content:""; position:fixed; left:-50%; right:-50%; bottom:-24vh; height:78vh; z-index:-1; pointer-events:none; background-image:linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size:56px 56px; transform:perspective(380px) rotateX(64deg); transform-origin:50% 100%; -webkit-mask-image:linear-gradient(to top, #000 18%, transparent 78%); mask-image:linear-gradient(to top, #000 18%, transparent 78%); animation:ra-grid 3.2s linear infinite; } @keyframes ra-grid{ from{ transform:perspective(380px) rotateX(64deg) translateY(0); } to{ transform:perspective(380px) rotateX(64deg) translateY(56px); } } html.neon-ui body::after{ content:""; position:fixed; inset:0; z-index:70; pointer-events:none; background:repeating-linear-gradient(180deg, rgba(255,255,255,.026) 0 1px, transparent 1px 3px); } /* matrix: grid nahi โ€” upar se neeche girti hari "baarish" */ html[data-theme="matrix"] body::before{ left:0; right:0; top:-100vh; bottom:auto; height:200vh; transform:none; -webkit-mask-image:none; mask-image:none; background-image: repeating-linear-gradient(90deg, transparent 0 21px, rgba(57,255,20,.045) 21px 22px), repeating-linear-gradient(180deg, transparent 0 140px, rgba(57,255,20,.10) 170px, transparent 200px); background-size:auto, 23px 100%; animation:ra-rain 9s linear infinite; } @keyframes ra-rain{ from{ transform:translateY(0); } to{ transform:translateY(50%); } } /* ---------- header, tabs, headings ---------- */ html.neon-ui header{ border-bottom:1px solid var(--line); box-shadow:0 1px 0 var(--glow-b), 0 12px 40px rgba(0,0,0,.35); } html.neon-ui h1{ font-weight:800; letter-spacing:.07em; text-transform:uppercase; background:linear-gradient(90deg, var(--accent), var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 10px var(--glow-a)); } html.neon-ui .sub{ color:var(--dim); } html.neon-ui .tab{ letter-spacing:.03em; transition:color .2s, text-shadow .2s; } html.neon-ui .tab:hover{ color:var(--text); } html.neon-ui .tab.on{ color:var(--text); border-bottom-color:var(--accent); text-shadow:0 0 10px var(--glow-a); box-shadow:0 10px 18px -14px var(--glow-a); } html.neon-ui h2{ color:var(--accent); letter-spacing:.2em; text-shadow:0 0 10px var(--glow-a); } html.neon-ui h2::after{ content:""; display:block; height:1px; margin-top:8px; background:linear-gradient(90deg, var(--accent), var(--accent2) 40%, transparent); box-shadow:0 0 8px var(--glow-a); } html.neon-ui .sgroup h3{ text-shadow:0 0 12px var(--glow-a); } html.neon-ui a{ color:var(--accent); text-shadow:0 0 8px var(--glow-a); } /* ---------- panels (kaanch + neon kinare) ---------- */ html.neon-ui :is(.card, .sgroup, .stat, .gen-panel, .empty){ background:var(--panel); border:1px solid var(--line); box-shadow:inset 0 0 0 1px rgba(255,255,255,.02), 0 12px 40px rgba(0,0,0,.45); } html.neon-ui .card{ position:relative; transition:border-color .25s, box-shadow .25s; } html.neon-ui .card:hover{ border-color:var(--line2); box-shadow:0 0 0 1px var(--line2), 0 0 24px -6px var(--glow-a), 0 12px 40px rgba(0,0,0,.45); } html.neon-ui .card::before{ content:""; position:absolute; left:-1px; top:16px; bottom:16px; width:3px; border-radius:3px; background:var(--line2); box-shadow:0 0 10px var(--glow-a); } html.neon-ui .card[data-status="pending_approval"]::before{ background:var(--warn); box-shadow:0 0 12px var(--warn); } html.neon-ui .card:is([data-status="approved"],[data-status="ready"],[data-status="published"])::before{ background:var(--ok); box-shadow:0 0 12px var(--ok); } html.neon-ui .card:is([data-status="generating"],[data-status="publishing"])::before{ background:var(--accent); box-shadow:0 0 14px var(--accent); animation:ra-blink 1.4s ease-in-out infinite; } html.neon-ui .card:is([data-status="failed"],[data-status="skipped"])::before{ background:var(--bad); box-shadow:0 0 12px var(--bad); } @keyframes ra-blink{ 50%{ opacity:.35; } } /* HUD kone */ html.neon-ui .sgroup{ position:relative; } html.neon-ui .sgroup::before, html.neon-ui .sgroup::after{ content:""; position:absolute; width:20px; height:20px; pointer-events:none; border-style:solid; } html.neon-ui .sgroup::before{ top:-1px; left:-1px; border-width:2px 0 0 2px; border-color:var(--accent); border-top-left-radius:var(--radius); filter:drop-shadow(0 0 6px var(--glow-a)); } html.neon-ui .sgroup::after{ bottom:-1px; right:-1px; border-width:0 2px 2px 0; border-color:var(--accent2); border-bottom-right-radius:var(--radius); filter:drop-shadow(0 0 6px var(--glow-b)); } html.neon-ui .stat b{ font-family:var(--mono); font-size:22px; color:var(--accent); text-shadow:0 0 12px var(--glow-a); } html.neon-ui .stat:nth-child(2n) b{ color:var(--accent2); text-shadow:0 0 12px var(--glow-b); } html.neon-ui .stat span{ color:var(--dim); } html.neon-ui .thumb{ border:1px solid var(--line); box-shadow:0 0 18px -6px var(--glow-a); } html.neon-ui .thumb .play{ color:var(--accent); background:rgba(0,0,0,.38); text-shadow:0 0 14px var(--glow-a); } html.neon-ui .fitem{ border-color:var(--line); } html.neon-ui .fitem:hover{ border-color:var(--line2); box-shadow:0 0 16px -4px var(--glow-a); } /* ---------- buttons ---------- */ html.neon-ui button{ background:rgba(255,255,255,.035); border-color:var(--line); color:var(--text); transition:border-color .2s, box-shadow .2s, color .2s, transform .1s; } html.neon-ui button:hover:not(:disabled){ border-color:var(--line2); box-shadow:0 0 14px -2px var(--glow-a); color:#fff; } html.neon-ui button:active:not(:disabled){ transform:translateY(1px); } html.neon-ui button.ghost{ background:transparent; } html.neon-ui :is(button.primary, label.btn.primary){ background:linear-gradient(95deg, var(--accent), var(--accent2)); color:var(--on-accent); border:0; font-weight:800; box-shadow:0 0 16px -2px var(--glow-a), 0 0 22px -6px var(--glow-b); } html.neon-ui :is(button.primary, label.btn.primary):hover:not(:disabled){ color:var(--on-accent); box-shadow:0 0 22px 0 var(--glow-a), 0 0 32px -4px var(--glow-b); } html.neon-ui button.danger{ color:var(--bad); } html.neon-ui button.danger:hover:not(:disabled){ border-color:var(--bad); box-shadow:0 0 14px -2px var(--bad); } html.neon-ui .gen-panel{ border-color:var(--accent); box-shadow:0 0 26px -8px var(--glow-a); } /* ---------- inputs ---------- */ html.neon-ui :is(input[type=text], input[type=password], input[type=number], textarea, select){ background:rgba(0,0,0,.38); border-color:var(--line); color:var(--text); } html.neon-ui :is(input, textarea, select):focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,255,255,.04), 0 0 16px -4px var(--glow-a); } html.neon-ui option, html.neon-ui optgroup{ background:#0b0f22; color:var(--text); } html[data-theme="matrix"] option{ background:#021309; } html[data-theme="synthwave"] option{ background:#1d0638; } /* ---------- pills, tags, badges ---------- */ html.neon-ui .pill{ background:transparent; border:1px solid currentColor; box-shadow:0 0 10px -2px currentColor; text-shadow:0 0 8px currentColor; } html.neon-ui :is(.s-generating, .s-publishing){ animation:ra-pulse 1.6s ease-in-out infinite; } @keyframes ra-pulse{ 50%{ box-shadow:0 0 18px 1px currentColor; } } html.neon-ui .tag{ background:rgba(255,255,255,.03); border-color:var(--line); } html.neon-ui .tag.style{ border-color:var(--accent); color:var(--accent); box-shadow:0 0 10px -3px var(--glow-a); } html.neon-ui .role{ box-shadow:0 0 10px -3px currentColor; border:1px solid currentColor; background:transparent; } html.neon-ui .role.staff{ color:var(--dim); } html.neon-ui .fitem .badge{ box-shadow:0 0 10px var(--glow-a); } html.neon-ui .dot.on{ box-shadow:0 0 8px var(--ok); } html.neon-ui .chip.on{ box-shadow:0 0 0 1px var(--accent) inset, 0 0 14px -3px var(--glow-a); } /* ---------- banners ---------- */ html.neon-ui .banner{ background:var(--panel); border:1px solid var(--line); color:var(--text); } html.neon-ui .banner.warn{ border-color:var(--warn); box-shadow:inset 3px 0 0 var(--warn), 0 0 22px -12px var(--warn); color:var(--text); } html.neon-ui .banner.ok{ border-color:var(--ok); box-shadow:inset 3px 0 0 var(--ok), 0 0 22px -12px var(--ok); color:var(--text); } html.neon-ui .banner.bad{ border-color:var(--bad); box-shadow:inset 3px 0 0 var(--bad), 0 0 22px -12px var(--bad); color:var(--text); } html.neon-ui .banner b{ color:#fff; } html.neon-ui .warnline{ color:var(--warn); text-shadow:0 0 8px rgba(0,0,0,.4); } /* ---------- progress, table, toast, menu ---------- */ html.neon-ui .rbar{ background:rgba(0,0,0,.45); border-color:var(--line); } html.neon-ui .rbar i{ background:linear-gradient(90deg, var(--accent), var(--accent2), var(--accent)); background-size:200% 100%; animation:ra-flow 1.8s linear infinite; box-shadow:0 0 10px var(--glow-a); } @keyframes ra-flow{ to{ background-position:200% 0; } } html.neon-ui th{ color:var(--accent); opacity:.9; } html.neon-ui :is(td, th){ border-bottom-color:var(--line); } html.neon-ui .toast{ background:var(--panel2); border-color:var(--accent); box-shadow:0 0 22px -4px var(--glow-a), 0 10px 30px rgba(0,0,0,.5); backdrop-filter:blur(10px); } html.neon-ui .umenu{ background:var(--panel2); border-color:var(--line2); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 0 30px -10px var(--glow-a), 0 18px 50px rgba(0,0,0,.6); } html.neon-ui .savebar{ border-top-color:var(--line); box-shadow:0 -12px 30px rgba(0,0,0,.35); } html.neon-ui .agentbox{ background:rgba(0,0,0,.28); border-color:var(--line); } html.neon-ui .drop{ border-color:var(--line2); } html.neon-ui .drop.over{ border-color:var(--accent); background:rgba(255,255,255,.04); box-shadow:0 0 20px -6px var(--glow-a) inset; } html.neon-ui dialog video{ box-shadow:0 0 40px -6px var(--glow-a); border:1px solid var(--line2); } /* matrix: sab kuch hara, monospace */ html[data-theme="matrix"] h1{ background:none; color:var(--accent); text-shadow:0 0 12px var(--glow-a); filter:none; } html[data-theme="matrix"] .hook{ color:#eaffee; } /* kam animation chahiye (phone ki setting) */ @media (prefers-reduced-motion: reduce){ html.neon-ui *, html.neon-ui body::before{ animation:none !important; transition:none !important; } } /* ---------- login page ---------- */ html.neon-ui .box form{ background:var(--panel); border-color:var(--line2); box-shadow:0 0 30px -10px var(--glow-a), 0 18px 50px rgba(0,0,0,.5); } html.neon-ui .box form::before{ content:""; } html.neon-ui .logo h1{ margin-top:12px; }