/* Skyes Visual Standard — Spectacle Skin */
:root{--bg:#05010b;--bg2:#0b0220;--text:#f7f2ff;--muted:rgba(247,242,255,.74);--purple:#7b2cff;--violet:#b056ff;--gold:#ffd24a;--blue:#2fe3ff;--shadow:0 18px 60px rgba(0,0,0,.55);--shadow2:0 0 30px rgba(47,227,255,.22),0 0 30px rgba(123,44,255,.22),0 0 18px rgba(255,210,74,.16);--r:18px;--r2:28px;--font:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,"Apple Color Emoji","Segoe UI Emoji";--mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;font-family:var(--font);color:var(--text);background:radial-gradient(1400px 900px at 15% 15%,rgba(123,44,255,.18),transparent 60%),radial-gradient(1000px 800px at 90% 10%,rgba(47,227,255,.10),transparent 60%),radial-gradient(1200px 800px at 60% 95%,rgba(255,210,74,.10),transparent 60%),linear-gradient(180deg,var(--bg),var(--bg2));overflow-x:hidden}
a{color:inherit}.muted{color:var(--muted)}.mono{font-family:var(--mono)}.bold{font-weight:900}.sep{opacity:.45;margin:0 .45rem}
#skyfx{position:fixed;inset:0;z-index:-5;width:100%;height:100%}
.aurora{position:fixed;inset:-20%;z-index:-4;background:radial-gradient(closest-side at 20% 30%,rgba(47,227,255,.22),transparent 65%),radial-gradient(closest-side at 70% 25%,rgba(176,86,255,.18),transparent 70%),radial-gradient(closest-side at 60% 80%,rgba(255,210,74,.12),transparent 65%),linear-gradient(120deg,rgba(123,44,255,.12),rgba(47,227,255,.10),rgba(255,210,74,.08));filter:blur(35px) saturate(1.2);opacity:.9;mix-blend-mode:screen;animation:auroraDrift 14s ease-in-out infinite alternate}
@keyframes auroraDrift{0%{transform:translate3d(-2%,-1%,0) rotate(-2deg) scale(1.02)}100%{transform:translate3d(2%,1%,0) rotate(2deg) scale(1.05)}}
.noise{position:fixed;inset:0;z-index:-3;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");opacity:.14;mix-blend-mode:overlay}
.cineloader{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;background:radial-gradient(900px 600px at 50% 45%,rgba(123,44,255,.18),rgba(0,0,0,.92));backdrop-filter:blur(12px)}
.cineloader.on{display:flex}
.cinewrap{width:min(560px,calc(100% - 36px));text-align:center;padding:22px 18px 18px;border-radius:28px;border:1px solid rgba(255,255,255,.18);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));box-shadow:var(--shadow),var(--shadow2)}
.cine-logo{width:86px;height:auto;filter:drop-shadow(0 0 24px rgba(123,44,255,.75)) drop-shadow(0 0 22px rgba(47,227,255,.45)) drop-shadow(0 0 18px rgba(255,210,74,.28));animation:logoFloat 2.8s ease-in-out infinite}
@keyframes logoFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.03)}}
.cine-title{margin-top:10px;font-weight:1000;letter-spacing:2px;text-transform:uppercase;font-size:16px}
.cine-sub{margin-top:6px;color:var(--muted)}
.cine-bar{margin:14px auto 10px;height:10px;width:min(420px,100%);border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);overflow:hidden}
.cine-fill{height:100%;width:40%;border-radius:999px;background:linear-gradient(90deg,rgba(47,227,255,.95),rgba(123,44,255,.95),rgba(255,210,74,.95));box-shadow:0 0 30px rgba(47,227,255,.25),0 0 30px rgba(123,44,255,.25);animation:fill 1.6s ease-in-out infinite}
@keyframes fill{0%{transform:translateX(-120%)}100%{transform:translateX(280%)}}
.cine-fine{font-size:12px;color:var(--muted)}
.btn{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);color:var(--text);padding:10px 14px;border-radius:16px;cursor:pointer;text-decoration:none;font-weight:900;letter-spacing:.2px;transition:transform .12s ease,filter .12s ease,box-shadow .12s ease,border-color .12s ease}
.btn:hover{transform:translateY(-1px);filter:brightness(1.06)}.btn:active{transform:translateY(0)}.btn.small{padding:8px 10px;border-radius:14px;font-size:12px}.btn.ghost{background:rgba(0,0,0,.18)}
.btn.neon{border-color:rgba(47,227,255,.40);background:linear-gradient(180deg,rgba(47,227,255,.14),rgba(123,44,255,.12));box-shadow:0 0 0 1px rgba(47,227,255,.10) inset,0 0 22px rgba(47,227,255,.18),0 0 18px rgba(123,44,255,.16)}
.btn.neon:hover{border-color:rgba(255,210,74,.45);box-shadow:0 0 0 1px rgba(255,210,74,.10) inset,0 0 28px rgba(47,227,255,.22),0 0 22px rgba(255,210,74,.18)}
.input,.select,.textarea{width:100%;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.22);color:var(--text);padding:10px 10px;border-radius:14px;outline:none;box-shadow:0 0 0 1px rgba(123,44,255,.10) inset}
.textarea{min-height:92px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{border-color:rgba(47,227,255,.45);box-shadow:0 0 0 2px rgba(47,227,255,.12),0 0 0 1px rgba(123,44,255,.20) inset}
.card{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.16);border-radius:var(--r2);box-shadow:var(--shadow)}
.card.inset{border-radius:var(--r);box-shadow:none;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03))}
.brand{display:flex;align-items:center;gap:12px}.brand-title{font-weight:1000;letter-spacing:.6px}.brand-subtitle{color:var(--muted);font-size:12px}.brand-text{display:flex;flex-direction:column}
.logo-float{width:44px;height:auto;filter:drop-shadow(0 0 26px rgba(123,44,255,.75)) drop-shadow(0 0 20px rgba(47,227,255,.45)) drop-shadow(0 0 16px rgba(255,210,74,.22));animation:pulse 2.8s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.03)}}
.shell{min-height:100%;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid rgba(255,255,255,.16);background:linear-gradient(180deg,rgba(12,2,32,.74),rgba(12,2,32,.22));backdrop-filter:blur(12px);position:sticky;top:0;z-index:5}
.top-actions{display:flex;gap:10px}
.landing{width:min(1220px,calc(100% - 36px));margin:22px auto;display:flex;flex-direction:column;gap:16px}
.hero{display:grid;grid-template-columns:1.18fr .82fr;gap:16px;padding:18px}
.hero h1{margin:10px 0 8px;font-size:36px;line-height:1.04;letter-spacing:.2px;text-shadow:0 0 24px rgba(123,44,255,.18),0 0 22px rgba(47,227,255,.12)}
.hero-grid{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 12px}
.pill{border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.22);padding:8px 10px;border-radius:999px;font-size:12px;box-shadow:0 0 18px rgba(47,227,255,.08)}
.hero-cta{display:flex;gap:10px;margin-top:10px}
.preview-frame{border-radius:var(--r);border:1px solid rgba(255,255,255,.20);overflow:hidden;background:rgba(0,0,0,.22);min-height:260px;box-shadow:0 0 30px rgba(47,227,255,.10),0 0 30px rgba(123,44,255,.10)}
.preview-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.20)}
.dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.18)}.preview-title{font-size:12px;color:var(--muted);margin-left:auto}
.preview-body{position:relative;padding:14px}.preview-watermark{position:absolute;inset:auto 10px 10px 10px;text-align:right;font-weight:1000;opacity:.14;letter-spacing:2px;text-shadow:0 0 18px rgba(47,227,255,.22)}
.link-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px}
.link{padding:12px 12px;border-radius:16px;border:1px solid rgba(255,255,255,.18);text-decoration:none;background:rgba(0,0,0,.18);box-shadow:0 0 20px rgba(47,227,255,.08)}
.footer{margin-top:auto;padding:14px 18px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;justify-content:center;border-top:1px solid rgba(255,255,255,.12);background:rgba(12,2,32,.18)}
.suiteTop{min-height:100vh;display:flex;flex-direction:column}.stickywrap{position:sticky;top:0;z-index:10;backdrop-filter:blur(12px)}
.suitebar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.16);background:linear-gradient(180deg,rgba(12,2,32,.78),rgba(12,2,32,.22))}
.suite-controls{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.ws-mini{display:flex;gap:8px;align-items:center}
.tabsbar{border-bottom:1px solid rgba(255,255,255,.12);background:rgba(12,2,32,.16)}.tabs{display:flex;gap:8px;padding:10px 12px;overflow:auto;-webkit-overflow-scrolling:touch}
.tab{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;padding:10px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.18);text-decoration:none;font-weight:1000;font-size:12px;box-shadow:0 0 18px rgba(47,227,255,.06)}
.tab.active{border-color:rgba(255,210,74,.42);box-shadow:0 0 0 2px rgba(255,210,74,.12) inset,0 0 28px rgba(123,44,255,.14)}
.tab .tnum{font-family:var(--mono);opacity:.9;padding:4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.20)}
.main{padding:16px;flex:1}.mainbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px;border:1px solid rgba(255,255,255,.16);border-radius:var(--r2);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.18));box-shadow:var(--shadow2)}
.panelgrid{display:grid;grid-template-columns:1.05fr 1.05fr .90fr;gap:14px;margin-top:14px}.panel{padding:14px}
.panelhead{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px}.paneltitle{font-weight:1000}
.badge{font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.20)}
.badge-live{border-color:rgba(47,227,255,.35);box-shadow:0 0 18px rgba(47,227,255,.10)}
.field{padding:10px;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:rgba(0,0,0,.18);box-shadow:0 0 0 1px rgba(123,44,255,.08) inset}
.field label{font-weight:900;font-size:13px;display:block;margin-bottom:8px}
.form-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.attach,.support{margin-top:12px;padding:12px}.attach-row{display:flex;gap:8px;align-items:center}.attach-row .input{flex:1}
.attach-item{display:flex;justify-content:space-between;gap:10px;padding:10px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.18)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vault-row{padding:10px;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.18);display:flex;justify-content:space-between;gap:10px}
.tour{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.72);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:18px}
.tour-card{width:min(640px,100%);border-radius:28px;border:1px solid rgba(255,255,255,.18);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.28));box-shadow:var(--shadow),var(--shadow2);padding:16px}
.tour-dot{width:9px;height:9px;border-radius:999px;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.08)}
.tour-dot.on{border-color:rgba(47,227,255,.55);background:linear-gradient(180deg,rgba(47,227,255,.40),rgba(123,44,255,.18));box-shadow:0 0 16px rgba(47,227,255,.18)}
.toast{position:fixed;right:16px;bottom:16px;z-index:12000;padding:12px 14px;border-radius:18px;border:1px solid rgba(255,255,255,.18);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.28));box-shadow:var(--shadow2);font-weight:900;transform:translateY(14px);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease}
.toast.on{opacity:1;transform:translateY(0)}.toast[data-ok="1"]{border-color:rgba(47,227,255,.38)}.toast[data-ok="0"]{border-color:rgba(255,77,109,.40)}
@media (max-width:1080px){.panelgrid{grid-template-columns:1fr}.grid2{grid-template-columns:1fr}}
@media (max-width:980px){.link-grid{grid-template-columns:1fr}.hero{grid-template-columns:1fr}}