@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');
:root{--bg:#09070b;--panel:#160d14;--panel2:#20111a;--line:rgba(255,83,104,.28);--text:#f7edf0;--muted:#b99fa8;--red:#a31632;--deep:#650d20;--glow:#ff4058;--green:#63dda6}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#09070b;color:var(--text);font:14px/1.55 Inter,system-ui,sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}button,input,select{font:inherit}
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:radial-gradient(ellipse at 10% 20%,rgba(155,17,43,.16),transparent 30%),radial-gradient(ellipse at 90% 75%,rgba(105,10,34,.16),transparent 34%),linear-gradient(120deg,#09070b,#12080f 56%,#08070d)}
.ambient:before{content:"";position:absolute;inset:-10%;background:url('oni-scene.svg') center/cover no-repeat;opacity:.16;animation:scene 46s ease-in-out infinite alternate}
.ambient:after{content:"";position:absolute;inset:0;opacity:.12;background-image:radial-gradient(#ff6276 1px,transparent 1px);background-size:64px 64px;animation:particles 35s linear infinite}
.ember{position:absolute;width:5px;height:5px;border-radius:50%;background:#ff5268;box-shadow:0 0 17px #ff2949;animation:float 14s ease-in-out infinite alternate}.e1{top:18%;left:12%}.e2{top:70%;left:47%;animation-delay:-5s}.e3{top:38%;right:13%;animation-delay:-9s}.e4{bottom:8%;right:31%;animation-delay:-3s}
@keyframes scene{to{transform:scale(1.08) translate(-1%,1%)}}@keyframes particles{to{background-position:64px 128px}}@keyframes float{to{transform:translate(48px,40px) scale(1.8);opacity:.2}}@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes glow{0%,100%{filter:drop-shadow(0 0 2px #9e1832)}50%{filter:drop-shadow(0 0 15px #ff4058)}}@keyframes sheen{to{background-position:220% center}}
.site{position:relative;z-index:1;min-height:100vh}.topnav{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,5vw,74px);border-bottom:1px solid rgba(255,82,101,.14);background:rgba(8,6,10,.76);backdrop-filter:blur(18px);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:10px;min-width:210px}.brand img{width:48px;height:48px;filter:drop-shadow(0 0 12px rgba(255,43,67,.45))}.brandname{font:700 20px Cinzel,Georgia,serif;letter-spacing:-.6px}.brandname .red{color:#ef3b56}.brand small{display:block;text-align:center;color:#d5b9c0;font:600 9px Inter,sans-serif;letter-spacing:4px;margin-top:-3px}
.navlinks{display:flex;align-items:center;gap:28px}.navlinks a{font-size:12px;color:#d7c3c9;position:relative}.navlinks a:after{content:"";height:2px;position:absolute;left:0;right:100%;bottom:-9px;background:#ff4b64;transition:right .25s}.navlinks a:hover:after{right:0}.navactions{display:flex;align-items:center;gap:10px}.navbtn,.outline-button{padding:10px 16px;border:1px solid rgba(255,99,116,.35);border-radius:9px;font-size:11px;color:#f8e9ec;display:inline-flex;align-items:center;justify-content:center;transition:.2s}.navbtn.primary{background:linear-gradient(120deg,#701027,#c62040);border-color:#f34a60;box-shadow:0 0 22px rgba(205,20,53,.23)}.navbtn:hover,.outline-button:hover{transform:translateY(-2px);box-shadow:0 0 22px rgba(255,55,78,.22)}
.hero{max-width:1450px;margin:0 auto;padding:56px clamp(20px,5vw,75px) 35px;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(390px,.82fr);gap:38px;align-items:center;min-height:calc(100vh - 76px);position:relative}.hero-art{position:absolute;inset:0 28% 0 0;background:url('oni-scene.svg') center/cover no-repeat;opacity:.32;mask-image:linear-gradient(90deg,#000 0%,#000 70%,transparent 100%);z-index:-1}
.hero-copy{animation:rise .8s both;max-width:670px}.hero-emblem{width:150px;height:150px;display:block;margin:0 auto 0 15%;filter:drop-shadow(0 0 24px rgba(255,49,72,.42));animation:glow 5s ease-in-out infinite}.hero-wordmark{font:700 clamp(45px,6vw,78px)/1 Cinzel,Georgia,serif;letter-spacing:-3px;margin:0;text-shadow:0 12px 34px #000}.hero-wordmark .oni{color:#f6e7e9}.hero-wordmark .connect{color:#e52c48}.rmm{font:600 16px Cinzel,Georgia,serif;letter-spacing:10px;color:#e0c7cd;margin:10px 0 6px 8px}.tagline{letter-spacing:4px;font-size:10px;color:#d7c1c6;text-transform:uppercase;margin:14px 0 26px}.feature-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:21px}.feature-pill{border:1px solid rgba(255,79,100,.3);background:linear-gradient(140deg,rgba(34,13,22,.84),rgba(15,10,17,.8));border-radius:13px;padding:12px 15px;min-width:94px;text-align:center;box-shadow:0 10px 30px #0003;transition:transform .25s,border-color .25s}.feature-pill:hover{transform:translateY(-5px);border-color:#ff5369}.feature-pill b{display:block;color:#ff5369;font-size:22px;margin-bottom:4px}.feature-pill span{font-size:10px;color:#e2d0d4}.hero-caption{margin-top:27px;border-top:1px solid rgba(255,82,102,.3);padding-top:18px;max-width:480px;text-align:center;letter-spacing:3px;color:#f0dadd;text-transform:uppercase;font-size:11px}
.auth-card{position:relative;background:linear-gradient(155deg,rgba(29,12,21,.95),rgba(10,8,13,.93));border:1px solid rgba(255,74,96,.68);border-radius:20px;padding:26px 28px;box-shadow:0 24px 80px #0009,0 0 36px rgba(184,16,46,.18),inset 0 0 36px rgba(181,19,46,.06);backdrop-filter:blur(22px);animation:rise .8s .13s both;max-width:560px;width:100%;justify-self:center;overflow:hidden}
.auth-card:before,.auth-card:after{content:"";position:absolute;width:72px;height:72px;border-color:rgba(255,70,91,.35);pointer-events:none}.auth-card:before{top:7px;left:7px;border-top:1px solid;border-left:1px solid}.auth-card:after{bottom:7px;right:7px;border-bottom:1px solid;border-right:1px solid}
.card-brand{text-align:center;margin-bottom:14px}.card-brand img{width:66px;height:66px;display:block;margin:0 auto -5px;filter:drop-shadow(0 0 12px #b71936)}.card-brand strong{font:700 22px Cinzel,Georgia,serif}.card-brand strong .red{color:#ef405a}.card-brand small{display:block;color:#b99fa8;letter-spacing:4px;font-size:9px}
.auth-tabs{display:flex;gap:6px;padding:5px;background:#08060b80;border:1px solid rgba(255,94,111,.15);border-radius:11px;margin-bottom:18px}.auth-tabs a{flex:1;padding:10px;text-align:center;border-radius:8px;color:#cbb8be;font-size:11px}.auth-tabs a.active{background:linear-gradient(120deg,#721027,#c31e3b);color:#fff;box-shadow:0 0 18px rgba(221,37,64,.24)}
.auth-card h1{text-align:center;font-size:21px;margin:7px 0 4px;letter-spacing:-.5px}.subcopy{text-align:center;color:#bca8ae;font-size:11px;margin:0 0 17px}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.field{margin:11px 0}.field label{display:block;font-size:10px;color:#d7c1c7;margin-bottom:6px;letter-spacing:.3px}.field input,.field select{width:100%;height:43px;background:rgba(12,10,15,.82);border:1px solid rgba(199,125,139,.35);border-radius:8px;color:#fff;padding:0 12px;outline:none;transition:border-color .2s,box-shadow .2s}.field input:focus,.field select:focus{border-color:#ff4b64;box-shadow:0 0 0 3px rgba(239,54,78,.12)}.field input::placeholder{color:#947e86}.field select option{background:#1c1018;color:#fff}.optional{color:#8e7d84;font-size:9px;margin-left:5px}.passwrap{position:relative}.passwrap input{padding-right:42px}.reveal{position:absolute;right:7px;top:6px;width:30px;height:30px;border:0;background:none;color:#bda5ad;cursor:pointer}.formrow{display:flex;justify-content:space-between;gap:10px;color:#bba7ae;font-size:10px;margin:9px 0}.formrow a,.textlink{color:#ff5a70}.checkline{display:flex;gap:7px;align-items:center}.checkline input{accent-color:#c51f3c}
.primary-button{width:100%;border:1px solid #ff596f;border-radius:9px;height:47px;background:linear-gradient(110deg,#710c23,#c91e3c 50%,#851029);color:#fff;font-weight:750;letter-spacing:.3px;cursor:pointer;box-shadow:0 0 22px rgba(225,26,58,.28),inset 0 1px #ffffff2e;transition:transform .2s,box-shadow .2s}.primary-button:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(240,34,68,.36)}.orline{display:flex;align-items:center;gap:12px;color:#947e86;font-size:9px;margin:14px 0}.orline:before,.orline:after{content:"";height:1px;background:rgba(199,125,139,.2);flex:1}.auth-foot{text-align:center;color:#bdaab0;font-size:10px;margin:14px 0 0}.auth-foot a{color:#ff5a70;font-weight:700}.alert{padding:9px 11px;margin:9px 0 12px;border-radius:8px;font-size:10px}.alert.error{color:#ffc0c7;background:#8812283d;border:1px solid #ff47614d}.alert.success{color:#b8f8d9;background:#18704c33;border:1px solid #49d79740}
.verify-icon{width:62px;height:62px;margin:5px auto 12px;border-radius:50%;display:grid;place-items:center;color:#ff536d;font-size:25px;border:1px solid #ff445a8c;box-shadow:0 0 26px #f022442b;animation:glow 3s infinite}.otp-input{font-size:23px!important;letter-spacing:14px;text-align:center;padding-left:20px!important;font-weight:800}.resend-row{text-align:center;font-size:10px;color:#a9949b;margin:13px 0 0}.resend-row button{border:0;background:none;color:#ff6378;text-decoration:underline;cursor:pointer;font-weight:700}
.landing{max-width:1450px;margin:auto;padding:70px clamp(20px,5vw,75px) 75px}.landing .hero-title{font:700 clamp(42px,5.5vw,72px)/1.1 Cinzel,Georgia,serif;max-width:790px;margin:18px 0}.hero-title span{color:#f0445c}.landing-copy{max-width:600px;color:#c9b4bb;font-size:14px}.landing-cta{display:flex;gap:11px;margin-top:25px}.section{max-width:1450px;margin:25px auto;padding:30px clamp(20px,5vw,75px)}.section-title{text-align:center;font:700 30px Cinzel,Georgia,serif;margin-bottom:8px}.section-sub{text-align:center;color:var(--muted);margin-bottom:28px}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.feature-card,.plan-card,.panel,.stat-card{background:linear-gradient(145deg,rgba(32,14,23,.88),rgba(13,10,16,.95));border:1px solid rgba(255,86,104,.2);border-radius:14px;padding:20px;box-shadow:0 18px 45px #0003;backdrop-filter:blur(14px);transition:transform .25s,border-color .25s}.feature-card:hover,.plan-card:hover{transform:translateY(-5px);border-color:#ff566e8c}.feature-card .ico{font-size:24px;color:#ff526a}.feature-card h3{font-size:13px;margin:9px 0 5px}.feature-card p{font-size:10px;color:#bca8ae;margin:0}
.pricing-top{text-align:center;padding:36px 0 24px}.pricing-top h1{font:700 35px Cinzel,Georgia,serif;margin:8px}.pricing-top p{color:#bca8ae;font-size:11px}.billing-switch{display:inline-flex;align-items:center;gap:12px;padding:8px 13px;border:1px solid #ff536740;border-radius:30px;margin-top:14px;font-size:10px;color:#c8b3ba}.billing-switch .selected{color:#ff687b;font-weight:800}.toggle{width:42px;height:23px;border-radius:20px;border:1px solid #812339;background:#2a101b;padding:3px;cursor:pointer}.toggle i{display:block;width:15px;height:15px;border-radius:50%;background:#ff536b;transition:transform .25s}.toggle.on i{transform:translateX(18px)}.plans-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.plan-card{position:relative;padding:19px;overflow:hidden}.plan-card.featured{border-color:#f43a58;box-shadow:0 0 28px #e81c4024}.popular{position:absolute;right:13px;top:12px;font-size:8px;background:#c51d3c;color:white;border-radius:20px;padding:5px 8px;letter-spacing:.7px}.plan-name{font-weight:800;font-size:15px}.plan-cap{display:block;color:#ff6578;font-size:10px;margin-top:3px}.plan-price{margin:20px 0 1px;font-size:31px;font-weight:800}.plan-price span{font-size:10px;color:#b99fa8;font-weight:400}.perdevice{font-size:9px;color:#d77b88}.plan-desc{font-size:10px;color:#c5afb6;min-height:30px;margin:14px 0}.plan-card ul{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:8px;font-size:10px;color:#cbb9be}.plan-card li:before{content:"✦";color:#ff526a;margin-right:8px}.plan-button{display:block;text-align:center;padding:10px;border-radius:8px;background:linear-gradient(110deg,#7d1027,#cb1e3e);border:1px solid #f54c63;color:white;font-size:10px;font-weight:800}.trial-note{border:1px solid #ff5f7138;border-radius:12px;padding:17px;margin:22px 0;color:#cbb5bc;background:#2d0d1880;font-size:10px}
.app-shell{display:flex;min-height:100vh}.sidebar{width:245px;flex-shrink:0;background:#09070cf2;border-right:1px solid #ff50652b;padding:22px 15px;display:flex;flex-direction:column;backdrop-filter:blur(18px)}.sidebar .brand{min-width:0;margin:0 0 32px 4px}.sidebar nav{display:grid;gap:5px}.sidebar nav a{padding:10px 12px;border-radius:8px;color:#c3afb6;font-size:10px;border:1px solid transparent;transition:.2s}.sidebar nav a:hover,.sidebar nav a.active{background:linear-gradient(90deg,#840f282e,#590b1c1a);border-color:#ff506540;color:#fff;box-shadow:inset 3px 0 #e12b49}.sidebottom{margin-top:auto;border-top:1px solid #ff50652b;padding:17px 4px 0;display:flex;align-items:center;gap:9px;font-size:10px}.sidebottom small{display:block;color:#8f7a82;font-size:9px}.userdot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#541326;color:white;font-weight:800}.sidebottom form{margin-left:auto}.sidebottom button{background:none;border:0;color:#bb9fa8;cursor:pointer}
.app-main{width:100%;min-width:0;padding:32px clamp(17px,4vw,52px);max-width:1700px;margin:auto}.app-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.eyebrow{color:#ff6377;font-size:9px;letter-spacing:2px;font-weight:800}.app-top h1{font-size:26px;margin:4px 0 2px}.muted{color:#a9959d;margin:0;font-size:10px}.livepill{background:#186d4c30;border:1px solid #53d09640;border-radius:30px;padding:8px 12px;color:#78dfad;font-size:10px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.stat-card{animation:rise .55s both}.stat-card:nth-child(2){animation-delay:.06s}.stat-card:nth-child(3){animation-delay:.12s}.stat-card:nth-child(4){animation-delay:.18s}.stat-card span{display:block;font-size:10px;color:#b49da5}.stat-card strong{display:block;font-size:28px;margin:5px 0}.stat-card small{font-size:9px;color:#8e7a82}.panel{margin-top:17px;padding:20px}.panelhead{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:17px}.panelhead h2{font-size:14px;margin:0}.panelhead p{font-size:10px;color:#a9959d;margin:3px 0}.empty{text-align:center;padding:38px 15px;color:#b09ba3}.empty h3{color:#f3e6e9;margin:8px 0 4px;font-size:13px}.emptyicon{margin:auto;width:48px;height:48px;border:1px solid #ff526a40;border-radius:12px;display:grid;place-items:center;color:#ff596f;font-size:21px}.notice{background:#5f152733;border:1px solid #ff5f7138;border-radius:9px;padding:13px;color:#cdb7be;font-size:10px}.tablewrap{overflow:auto}table{border-collapse:collapse;width:100%;font-size:10px}th{text-align:left;color:#967e87;font-size:9px;letter-spacing:1px;padding:10px;border-bottom:1px solid #ff506529}td{padding:12px 10px;border-bottom:1px solid #ff50651c}td small{display:block;color:#8e7a82}.status{display:inline-block;padding:4px 8px;border-radius:20px;font-size:9px;background:#2b1b23;color:#c2adb4}.status.online{background:#1e83562e;color:#70e1a6}.status.offline{background:#9a1b3138;color:#ff8796}.primary-link{color:#ff657b;font-size:10px}.detail{padding:13px 0;border-bottom:1px solid #ff506522;display:flex;justify-content:space-between;gap:15px;font-size:10px}.detail span{color:#ad969f}footer{color:#715c66;text-align:center;font-size:9px;padding:30px 0 14px}
@media(max-width:1080px){.hero{grid-template-columns:1fr .95fr;gap:24px}.feature-grid{grid-template-columns:repeat(2,1fr)}.plans-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:780px){.topnav{height:auto;min-height:68px;flex-wrap:wrap;padding:11px 16px;gap:9px}.navlinks{order:3;width:100%;justify-content:center;gap:19px;padding-bottom:5px}.navactions{margin-left:auto}.hero{grid-template-columns:1fr;padding-top:40px;min-height:auto}.hero-copy{text-align:center}.hero-emblem{margin:0 auto}.feature-pills{justify-content:center}.hero-caption{margin-left:auto;margin-right:auto}.app-shell{display:block}.sidebar{width:100%;padding:13px}.sidebar .brand{margin-bottom:13px}.sidebar nav{grid-template-columns:repeat(3,1fr)}.sidebottom{display:none}.app-main{padding:24px 14px}}
@media(max-width:520px){.brand{min-width:0}.brandname{font-size:17px}.brand img{width:39px;height:39px}.navlinks{gap:12px}.navlinks a{font-size:10px}.navbtn{padding:8px 10px;font-size:10px}.auth-card{padding:21px 16px}.formgrid{grid-template-columns:1fr;gap:0}.feature-grid,.plans-grid{grid-template-columns:1fr}.hero-wordmark{font-size:44px}.rmm{font-size:12px;letter-spacing:7px}.hero-emblem{width:118px;height:118px}.pricing-top h1{font-size:27px}.stats{gap:8px}.stat-card{padding:13px}.stat-card strong{font-size:22px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}




/* v0.6 — OniConnect: living crimson realm */
:root{--bg:#070408;--panel:#10080e;--panel2:#1a0911;--line:rgba(255,45,70,.5);--text:#fff4f5;--muted:#c8aeb7;--glow:#ff1744}
body{background:#070408;color:var(--text)}
.ambient{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#070408;isolation:isolate}
.ambient:before{content:"";position:absolute;inset:-3%;background:url('oni-cinematic-bg.webp') center 48%/cover no-repeat;opacity:.95;transform:scale(1.04);animation:realmDrift 42s ease-in-out infinite alternate;z-index:-4}
.ambient:after{content:"";position:absolute;inset:-30%;opacity:.28;background-image:radial-gradient(ellipse,rgba(255,45,69,.55) 0 1px,transparent 2px),radial-gradient(ellipse,rgba(255,170,175,.42) 0 1px,transparent 2px);background-size:113px 137px,181px 199px;background-position:0 0,50px 70px;animation:emberField 24s linear infinite;z-index:2}
.moon-halo{position:absolute;z-index:-2;width:clamp(260px,27vw,520px);height:clamp(260px,27vw,520px);left:clamp(7%,calc(50% - 570px),19%);top:7%;border-radius:50%;background:radial-gradient(circle,rgba(255,24,54,.23),rgba(183,7,35,.10) 42%,transparent 70%);filter:blur(14px);animation:moonPulse 8s ease-in-out infinite}
.mist{position:absolute;z-index:1;left:-15%;width:130%;height:25%;pointer-events:none;filter:blur(28px);opacity:.26;background:radial-gradient(ellipse at 20% 50%,rgba(206,185,195,.25),transparent 50%),radial-gradient(ellipse at 70% 50%,rgba(135,20,45,.26),transparent 55%)}
.mist-a{bottom:12%;animation:mistFlow 27s ease-in-out infinite alternate}.mist-b{bottom:29%;opacity:.15;animation:mistFlow 36s ease-in-out infinite alternate-reverse}
.energy{position:absolute;z-index:1;width:80vw;height:24vh;left:10vw;border:1px solid rgba(255,35,67,.12);border-radius:50%;filter:blur(2px);transform:rotate(-8deg);box-shadow:0 0 35px rgba(255,25,57,.08),inset 0 0 35px rgba(255,25,57,.06)}
.energy-a{bottom:4%;animation:energyDrift 14s ease-in-out infinite alternate}.energy-b{bottom:8%;transform:rotate(8deg) scale(.8);animation:energyDrift 19s ease-in-out infinite alternate-reverse}
.ember{z-index:3;position:absolute;width:4px;height:4px;border-radius:50%;background:#ff5368;box-shadow:0 0 10px 3px rgba(255,35,67,.6),0 0 28px rgba(255,20,55,.45);animation:emberRise 12s linear infinite}
.e1{top:85%;left:12%}.e2{top:77%;left:47%;animation-delay:-5s}.e3{top:68%;right:13%;animation-delay:-9s}.e4{top:92%;right:31%;animation-delay:-3s}.e5{top:75%;left:70%;animation-delay:-7s}.e6{top:90%;left:34%;animation-delay:-11s}.e7{top:82%;right:8%;animation-delay:-2s}
.petals{position:absolute;inset:0;z-index:2;overflow:hidden}.petals i{position:absolute;top:-8%;left:var(--x);width:12px;height:7px;border-radius:100% 0 100% 0;background:linear-gradient(135deg,#ff9aa9,#c30e35 65%,#570819);box-shadow:0 0 12px rgba(255,25,65,.38);opacity:0;animation:petalFall var(--dur) linear infinite;animation-delay:var(--delay)}
.petals i:nth-child(1){--x:7%;--dur:17s;--delay:-3s}.petals i:nth-child(2){--x:18%;--dur:21s;--delay:-12s}.petals i:nth-child(3){--x:31%;--dur:19s;--delay:-8s}.petals i:nth-child(4){--x:44%;--dur:23s;--delay:-16s}.petals i:nth-child(5){--x:58%;--dur:18s;--delay:-5s}.petals i:nth-child(6){--x:69%;--dur:22s;--delay:-14s}.petals i:nth-child(7){--x:78%;--dur:20s;--delay:-9s}.petals i:nth-child(8){--x:88%;--dur:24s;--delay:-19s}.petals i:nth-child(9){--x:96%;--dur:16s;--delay:-7s}.petals i:nth-child(10){--x:53%;--dur:26s;--delay:-21s}
@keyframes realmDrift{0%{transform:scale(1.04) translate3d(0,0,0)}100%{transform:scale(1.13) translate3d(-1.2%,.8%,0)}}
@keyframes emberField{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(4%,-7%,0)}}
@keyframes moonPulse{0%,100%{opacity:.5;transform:scale(.96)}50%{opacity:1;transform:scale(1.08)}}
@keyframes mistFlow{0%{transform:translateX(-7%) scaleY(.85)}100%{transform:translateX(8%) scaleY(1.15)}}
@keyframes energyDrift{0%{translate:-3% 0;scale:.94 1}100%{translate:4% -18px;scale:1.06 1.2}}
@keyframes emberRise{0%{transform:translate3d(0,30px,0) scale(.4);opacity:0}15%{opacity:.9}85%{opacity:.55}100%{transform:translate3d(70px,-90vh,0) scale(1.3);opacity:0}}
@keyframes petalFall{0%{transform:translate3d(0,-5vh,0) rotate(0deg);opacity:0}8%{opacity:.85}50%{transform:translate3d(65px,48vh,0) rotate(210deg)}100%{transform:translate3d(-35px,112vh,0) rotate(520deg);opacity:0}}
.topnav{height:78px;padding:0 clamp(20px,4vw,82px);background:rgba(5,3,7,.82);border-bottom:1px solid rgba(255,38,67,.42);box-shadow:0 8px 38px rgba(0,0,0,.32)}
.brand{gap:12px}.brand img{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 0 13px rgba(255,24,60,.8));animation:crestBreath 5s ease-in-out infinite}.brandname{font-size:22px;letter-spacing:-.8px}.brand small{letter-spacing:5px}
@keyframes crestBreath{0%,100%{filter:drop-shadow(0 0 8px rgba(255,24,60,.55))}50%{filter:drop-shadow(0 0 20px rgba(255,24,60,.95))}}
.navlinks{gap:clamp(18px,2.4vw,42px)}.navlinks a{font-size:13px}.navbtn,.outline-button{padding:12px 19px;border-radius:10px;font-size:12px}
.hero{width:100%;max-width:1640px;min-height:calc(100vh - 78px);padding:clamp(38px,5vh,75px) clamp(26px,5vw,90px) 60px;grid-template-columns:minmax(0,1.08fr) minmax(430px,.92fr);gap:clamp(26px,4vw,72px);align-items:center}
.hero-art{inset:0;background:radial-gradient(ellipse at 30% 42%,rgba(7,3,8,.10),transparent 62%);opacity:1;mask-image:none}
.hero-copy{max-width:850px}.hero-emblem{width:clamp(155px,13vw,240px);height:auto;margin:0 0 -3px 8%;filter:drop-shadow(0 0 22px rgba(255,20,58,.7));animation:crestBreath 4.8s ease-in-out infinite,emblemFloat 7s ease-in-out infinite}
@keyframes emblemFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-9px) rotate(1deg)}}
.hero-wordmark{font-size:clamp(55px,5.4vw,100px);letter-spacing:-4px;text-shadow:0 9px 34px #000}.rmm{font-size:clamp(13px,1vw,18px);letter-spacing:clamp(7px,1vw,13px);margin:13px 0 8px}.tagline{font-size:clamp(10px,.78vw,14px);letter-spacing:clamp(2px,.35vw,5px);margin:17px 0 24px;color:#f1dce0}
.landing-copy{font-size:clamp(14px,1vw,18px);line-height:1.75;color:#f0dfe3;max-width:740px;text-shadow:0 2px 12px #000}.feature-pills{gap:13px;margin-top:27px}.feature-pill{min-width:clamp(100px,8vw,150px);padding:16px 17px;border-radius:14px;background:linear-gradient(145deg,rgba(21,7,13,.91),rgba(7,5,9,.88));border-color:rgba(255,47,75,.58);box-shadow:0 12px 35px #0009,inset 0 0 22px rgba(255,35,65,.08);transition:transform .3s,border-color .3s,box-shadow .3s}.feature-pill:hover{transform:translateY(-7px) scale(1.035);border-color:#ff294b;box-shadow:0 0 26px rgba(255,30,65,.2)}.feature-pill b{font-size:clamp(23px,1.8vw,34px);text-shadow:0 0 18px #ff294b}.feature-pill span{font-size:clamp(10px,.72vw,13px)}
.hero-caption{max-width:580px;margin-top:27px;padding-top:18px;font-size:clamp(10px,.72vw,13px);letter-spacing:3px;border-color:rgba(255,55,78,.58)}.landing-cta{gap:15px;margin-top:26px}
.auth-card{max-width:670px;padding:clamp(28px,3vw,46px);border-radius:22px;border:1px solid rgba(255,36,70,.85);background:linear-gradient(145deg,rgba(10,5,10,.91),rgba(7,4,8,.88));box-shadow:0 30px 100px #000c,0 0 48px rgba(255,20,58,.24),inset 0 0 42px rgba(255,20,58,.09);backdrop-filter:blur(20px)}
.auth-card:before,.auth-card:after{width:84px;height:84px;border-color:rgba(255,54,82,.65);filter:drop-shadow(0 0 8px rgba(255,25,55,.4))}.card-brand img{width:clamp(78px,5vw,105px);height:auto;filter:drop-shadow(0 0 20px #ff1c48);animation:crestBreath 4.8s ease-in-out infinite}.card-brand strong{font-size:clamp(23px,1.8vw,32px)}.card-brand small{font-size:10px;letter-spacing:5px}.auth-tabs{padding:6px;margin-bottom:22px}.auth-tabs a{padding:13px;font-size:13px}.auth-card h1{font-size:clamp(21px,1.6vw,29px);margin:12px 0 7px}.subcopy{font-size:clamp(11px,.82vw,15px);margin-bottom:22px}.primary-button{height:56px;font-size:14px;border-radius:11px;box-shadow:0 0 30px rgba(240,24,63,.4),inset 0 1px #ffffff45;animation:buttonGlow 4s ease-in-out infinite}.orline{font-size:10px;letter-spacing:2px;margin:22px 0}.auth-card .feature-pill{min-width:clamp(90px,7vw,130px);padding:16px 12px}.auth-card .feature-pill b{font-size:25px}.auth-card .feature-pill span{font-size:11px}
@keyframes buttonGlow{0%,100%{box-shadow:0 0 15px rgba(240,24,63,.25),inset 0 1px #ffffff45}50%{box-shadow:0 0 34px rgba(240,24,63,.52),inset 0 1px #ffffff55}}
@media(max-width:1100px){.hero{grid-template-columns:1fr minmax(370px,.9fr);padding-left:4vw;padding-right:4vw;gap:24px}.hero-wordmark{font-size:clamp(48px,5.4vw,76px)}}
@media(max-width:780px){.topnav{height:auto;min-height:72px;padding:10px 16px}.hero{grid-template-columns:1fr;padding:36px 18px 48px;gap:30px}.hero-copy{text-align:center;margin:auto}.hero-emblem{margin:0 auto}.feature-pills{justify-content:center}.hero-caption{margin-left:auto;margin-right:auto}.auth-card{justify-self:center}.ambient:before{background-position:center;background-size:auto 100%;opacity:.62}.navlinks{gap:16px}.moon-halo{left:10%;top:10%}}
@media(max-width:520px){.hero-wordmark{font-size:clamp(42px,11vw,58px)}.hero-emblem{width:120px}.auth-card{padding:22px 16px}.feature-pill{min-width:78px;padding:12px 9px}.feature-pill span{font-size:9px}.brand img{width:46px;height:46px}}
@media(prefers-reduced-motion:reduce){.ambient:before,.ambient:after,.mist,.energy,.petals i,.ember,.moon-halo,.hero-emblem,.brand img,.primary-button{animation:none!important}}

/* v0.7 brand assets: supplied OniConnect crest + supplied crimson Japan wallpaper */
.ambient:before{
  background-image:url('oni-wallpaper.webp');
  background-position:center 48%;
  background-size:cover;
  opacity:.86;
  filter:saturate(1.08) contrast(1.04);
}
.ambient:after{
  background-image:
    linear-gradient(180deg,rgba(5,3,8,.34) 0%,rgba(7,3,8,.08) 36%,rgba(5,3,8,.45) 100%),
    radial-gradient(ellipse,rgba(255,45,69,.55) 0 1px,transparent 2px),
    radial-gradient(ellipse,rgba(255,170,175,.42) 0 1px,transparent 2px);
  background-size:100% 100%,113px 137px,181px 199px;
  background-position:center,0 0,50px 70px;
  opacity:.9;
}
.hero-art{background:linear-gradient(90deg,rgba(5,3,8,.08),rgba(5,3,8,.02)),url('oni-wallpaper.webp') center/cover no-repeat;opacity:.20}
.brand img,.card-brand img,.hero-emblem{object-fit:contain}
.hero-emblem{width:clamp(140px,12vw,205px);height:clamp(140px,12vw,205px);border-radius:50%;background:radial-gradient(circle,rgba(7,3,8,.18),rgba(7,3,8,0) 72%);padding:4px}
.brand img{width:56px;height:56px}
.card-brand img{width:72px;height:72px}
@media(max-width:780px){.ambient:before{background-position:center;background-size:auto 100%;opacity:.78}.hero-art{opacity:.12}}
@media(prefers-reduced-motion:reduce){.ambient:before,.ambient:after,.mist,.energy,.petals i,.ember,.moon-halo,.hero-emblem,.brand img{animation:none!important}}


/* v0.8 password visibility control alignment */
.auth-card .passwrap { position:relative; }
.auth-card .passwrap > input { padding-right:56px; }
.auth-card .passwrap > .reveal {
  position:absolute;
  top:24px;
  right:7px;
  width:36px;
  height:36px;
  min-width:38px;
  padding:0;
  margin:0;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,83,104,.22);
  border-radius:8px;
  background:rgba(34,12,21,.72);
  color:#f3cbd2;
  line-height:1;
  cursor:pointer;
  z-index:2;
  transition:background .18s,border-color .18s,box-shadow .18s;
}
.auth-card .passwrap > .reveal:hover,
.auth-card .passwrap > .reveal:focus-visible {
  background:rgba(126,15,39,.72);
  border-color:#ff536a;
  box-shadow:0 0 14px rgba(255,45,76,.2);
  outline:none;
}
.auth-card .passwrap > .reveal svg { width:19px;height:19px;display:block; }

.auth-card .field-hint{display:block;margin-top:6px;color:#b99fa8;font-size:10px;line-height:1.45}

/* v0.9 account settings + legibility pass */
html{font-size:16px}
body{font-size:15px}
.sidebar{width:270px;padding:25px 17px}
.sidebar nav a{font-size:13px;padding:12px 13px}
.app-main{padding:38px clamp(20px,4.2vw,60px)}
.app-top h1{font-size:30px}
.eyebrow{font-size:10px}
.muted{font-size:12px}
.stat-card{padding:23px}
.stat-card span{font-size:12px}.stat-card strong{font-size:32px}.stat-card small{font-size:11px}
.panel{padding:24px}.panelhead h2{font-size:17px}.panelhead p{font-size:12px}
.empty h3{font-size:16px}.empty p,.notice{font-size:12px}
table{font-size:12px}th{font-size:10px}td{padding:14px 12px}
.detail{font-size:12px}
.sidebottom{font-size:12px}.sidebottom small{font-size:10px}
.side-user{color:#f4e9ec;min-width:0;line-height:1.35}.side-user small{display:block;color:#9f8992;font-size:10px;overflow-wrap:anywhere}.side-user em{display:block;color:#ff788a;font-size:10px;font-style:normal;margin-top:3px}
.sidebottom .userdot{width:40px;height:40px;font-size:20px;text-decoration:none;border:1px solid #ff536a66}
.settings-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);gap:18px;align-items:start}
.settings-panel{margin:0}.settings-panel .field{margin:16px 0}.settings-panel .field label{display:block;font-size:12px;color:#ead7dc;margin-bottom:8px}.settings-panel input:not([type=radio]){width:100%;height:48px;border:1px solid #754050;background:#100a10;color:#fff;border-radius:9px;padding:0 13px;font:inherit;font-size:14px;outline:none}.settings-panel input:focus{border-color:#ff536a;box-shadow:0 0 0 3px #ff536a20}.settings-panel input:disabled{opacity:.75;cursor:not-allowed}.settings-panel .field-hint{font-size:11px}.profile-preview{display:flex;align-items:center;gap:14px;padding:15px;border:1px solid #ff536a30;border-radius:12px;background:#210b164f;margin-bottom:18px}.profile-preview b{display:block;font-size:16px}.profile-preview small{display:block;color:#aa939c;font-size:11px;margin-top:3px}
.avatar-preview,.avatar-chip{display:grid;place-items:center;border-radius:50%;font-family:Georgia,serif;font-weight:800;text-shadow:0 2px 10px #0008;border:1px solid #ffffff42;box-shadow:0 0 22px currentColor}.avatar-preview{width:64px;height:64px;font-size:31px}.avatar-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.avatar-choice{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 5px;border:1px solid #ff536a2c;border-radius:11px;background:#100a10;cursor:pointer;transition:.2s}.avatar-choice:hover{border-color:#ff536a;transform:translateY(-2px)}.avatar-choice input{position:absolute;opacity:0;pointer-events:none}.avatar-choice:has(input:checked){border-color:#ff536a;background:#4b10224d;box-shadow:0 0 18px #ff294b24}.avatar-chip{width:43px;height:43px;font-size:22px}.avatar-choice small{font-size:10px;color:#d5c0c6;text-align:center}.avatar-oni-red{color:#ff6479;background:radial-gradient(circle at 35% 25%,#9b1a39,#210710 72%)}.avatar-oni-white{color:#fff0e9;background:radial-gradient(circle at 35% 25%,#9a7a82,#21151b 72%)}.avatar-oni-gold{color:#ffd27a;background:radial-gradient(circle at 35% 25%,#87601b,#241407 72%)}.avatar-oni-violet{color:#d7a3ff;background:radial-gradient(circle at 35% 25%,#63318d,#160b25 72%)}.avatar-oni-blue{color:#9ce6ff;background:radial-gradient(circle at 35% 25%,#236c91,#071724 72%)}.avatar-oni-shadow{color:#c5c0d0;background:radial-gradient(circle at 35% 25%,#56515e,#0b0a10 72%)}.avatar-oni-flame{color:#ffb16a;background:radial-gradient(circle at 35% 25%,#a43a16,#260b08 72%)}.avatar-oni-ice{color:#c8f8ff;background:radial-gradient(circle at 35% 25%,#498e9b,#07151b 72%)}
.alert{padding:12px 14px;border-radius:9px;font-size:12px;margin:12px 0}.alert.error{background:#6b142b55;border:1px solid #ff526a66;color:#ffb6c0}.alert.success{background:#14543855;border:1px solid #52d69a66;color:#a5f2ca}
.settings-panel .primary-button{width:100%;margin-top:8px}
@media(max-width:980px){.settings-grid{grid-template-columns:1fr}}
@media(max-width:780px){.sidebar{width:100%}.sidebar nav a{font-size:12px}.settings-grid{grid-template-columns:1fr}.avatar-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.app-main{padding:24px 16px}}
@media(max-width:520px){.avatar-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.settings-panel{padding:17px}.app-top h1{font-size:25px}}


/* v0.9.1 sidebar navigation clarity */
.sidebar .sidebar-nav{display:grid;gap:9px}
.sidebar .sidebar-nav a{min-height:46px;padding:10px 13px;display:flex;align-items:center;gap:13px;border-radius:10px;font-size:13px;line-height:1.35;color:#cbb9c0;border:1px solid #ffffff0a;background:linear-gradient(110deg,#ffffff04,#ffffff00);transition:background .18s ease,border-color .18s ease,transform .18s ease}
.sidebar .sidebar-nav a .nav-icon{width:25px;height:25px;flex:0 0 25px;display:grid;place-items:center;font-size:19px;line-height:1;color:#f05a72;background:#49132180;border:1px solid #ff536a2b;border-radius:7px;text-shadow:0 0 10px #ff365b55}
.sidebar .sidebar-nav a:hover{background:linear-gradient(100deg,#7e17302b,#ffffff08);border-color:#ff536a55;transform:translateX(2px);color:#fff}
.sidebar .sidebar-nav a.active{background:linear-gradient(100deg,#941d3b45,#4a10212e);border-color:#ff536a75;box-shadow:inset 3px 0 #ed3154,0 5px 18px #0005;color:#fff}
.sidebar .sidebar-nav a.active .nav-icon{background:#a51e3d55;border-color:#ff536a88;color:#fff}
.sidebar .sidebar-nav .nav-label{display:block;font-size:13px;font-weight:550;letter-spacing:.1px}
@media(max-width:760px){.sidebar .sidebar-nav{gap:7px}.sidebar .sidebar-nav a{min-height:43px;gap:10px}.sidebar .sidebar-nav a .nav-icon{width:23px;height:23px;flex-basis:23px;font-size:18px}}