/* AnimeViolet — CodyChat 11 login theme */
:root{
	--av-bg:#120816;
	--av-bg-soft:#24102c;
	--av-panel:rgba(29,13,36,.82);
	--av-line:rgba(255,255,255,.12);
	--av-text:#fff8ff;
	--av-muted:#bcaec4;
	--av-pink:#e779ff;
	--av-magenta:#bd31e4;
	--av-violet:#7827b8;
	--av-cyan:#55e7ef;
}

html,body{ min-height:100%; }
body{ background:var(--av-bg); }
#login_wrap.av-login-wrap{
	position:relative;
	min-height:100vh;
	overflow:hidden;
	color:var(--av-text);
	font-family:Inter,"Segoe UI",Arial,sans-serif;
	background:
		radial-gradient(circle at 12% 20%, rgba(184,42,221,.23), transparent 34%),
		radial-gradient(circle at 88% 76%, rgba(55,189,211,.12), transparent 30%),
		linear-gradient(145deg,#210b2a 0%,#100713 52%,#08070c 100%);
}

.av-atmosphere{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.av-grid{
	position:absolute; inset:0; opacity:.12;
	background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
	background-size:52px 52px;
	-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 78%);
	mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 78%);
}
.av-orb{ position:absolute; border-radius:50%; filter:blur(12px); opacity:.55; }
.av-orb-one{ width:440px; height:440px; left:-180px; top:16%; background:rgba(179,46,225,.18); box-shadow:0 0 120px rgba(202,61,235,.22); }
.av-orb-two{ width:360px; height:360px; right:-140px; bottom:-80px; background:rgba(70,224,229,.09); box-shadow:0 0 120px rgba(70,224,229,.13); }
.av-petal{ position:absolute; color:rgba(244,143,255,.48); font-size:20px; animation:avFloat 7s ease-in-out infinite; }
.av-petal-one{ top:21%; left:4%; }
.av-petal-two{ top:67%; right:5%; animation-delay:-2s; }
.av-petal-three{ top:10%; right:28%; animation-delay:-4s; }
@keyframes avFloat{ 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-22px) rotate(22deg)} }

.av-topbar{
	position:relative; z-index:5;
	width:min(1240px,calc(100% - 40px));
	margin:0 auto;
	min-height:88px;
	display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.av-brand{ display:flex; align-items:center; gap:12px; color:var(--av-text)!important; text-decoration:none!important; }
.av-brand-mark{
	display:grid; place-items:center; width:46px; height:46px; border-radius:16px;
	background:linear-gradient(145deg,var(--av-pink),var(--av-violet));
	box-shadow:0 12px 34px rgba(183,46,222,.34),inset 0 1px rgba(255,255,255,.35);
}
.av-brand-mark i{ font-size:20px; }
.av-brand strong,.av-brand small{ display:block; }
.av-brand strong{ font-size:18px; line-height:1.15; }
.av-brand small{ margin-top:4px; color:#ad96b4; font-size:9px; font-weight:800; letter-spacing:2px; }
.av-top-actions{ display:flex; align-items:center; gap:12px; }
.av-live-chip{ display:flex; align-items:center; gap:8px; padding:10px 14px; border:1px solid var(--av-line); border-radius:999px; background:rgba(255,255,255,.045); font-size:12px; color:#d7cadd; }
.av-live-chip i{ width:8px; height:8px; border-radius:50%; background:#55e799; box-shadow:0 0 12px #55e799; }
.av-language{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; gap:5px; border:1px solid var(--av-line); border-radius:14px; color:#fff; background:rgba(255,255,255,.05); cursor:pointer; }
.av-language img{ width:19px; height:19px; border-radius:50%; object-fit:cover; }

.av-main{
	position:relative; z-index:2;
	width:min(1240px,calc(100% - 40px));
	min-height:calc(100vh - 160px);
	margin:0 auto;
	display:grid;
	grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr);
	align-items:center;
	gap:clamp(30px,5vw,78px);
	padding:5px 0 5px;
}

.av-hero{ position:relative; min-height:680px; display:flex; flex-direction:column; justify-content:center; }
.av-kicker{ display:flex; align-items:center; gap:10px; color:#dba9e6; font-size:10px; font-weight:900; letter-spacing:2.2px; z-index: 3; }
.av-kicker i{ width:30px; height:1px; background:linear-gradient(90deg,var(--av-pink),transparent); }
.av-hero h1{ position:relative; z-index:2; max-width:590px; margin:18px 0 10px; font-size:clamp(42px,5.1vw,78px); line-height:.98; letter-spacing:-3px; font-weight:900; text-shadow:0 12px 50px rgba(0,0,0,.35); }
.av-lead{ position:relative; z-index:2; max-width:470px; margin:0; color:var(--av-muted); font-size:15px; line-height:1.7; }

.av-character-stage{ position:absolute; right:-4%; bottom:0%; width:78%; height:88%; pointer-events:none; }
.av-moon{
	position:absolute; width:67%; aspect-ratio:1; right:7%; top:10%; border-radius:50%;
	background:linear-gradient(145deg,#e582ff,#8a34ce 55%,#52248d);
	box-shadow:0 0 90px rgba(203,80,238,.34),inset 12px 12px 40px rgba(255,255,255,.12);
}
.av-moon:before{ content:""; position:absolute; inset:7%; border:1px solid rgba(255,255,255,.18); border-radius:50%; }
.av-character-frame{
	position:absolute; inset:0;
	-webkit-mask-image:radial-gradient(ellipse 68% 70% at 58% 52%,#000 56%,rgba(0,0,0,.95) 70%,transparent 98%);
	mask-image:radial-gradient(ellipse 68% 70% at 58% 52%,#000 56%,rgba(0,0,0,.95) 70%,transparent 98%);
}
.av-character-frame img{ width:100%; height:100%; object-fit:contain; object-position:center bottom; filter:saturate(1.08) contrast(1.04) drop-shadow(0 28px 32px rgba(0,0,0,.45)); }
.av-character-tag{ position:absolute; right:4%; bottom:15%; display:flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid rgba(255,255,255,.15); border-radius:12px; background:rgba(20,8,27,.7); backdrop-filter:blur(12px); font-size:9px; font-weight:900; letter-spacing:1.6px; }
.av-character-tag i{ color:var(--av-cyan); }
.av-hero-copy{ position:absolute; z-index:3; left:0; bottom:3%; display:flex; flex-direction:column; gap:6px; }
.av-hero-copy strong{ font-size:31px; line-height:1; letter-spacing:-1px; }
.av-hero-copy em{ color:var(--av-pink); font-style:normal; }
.av-hero-copy span{ color:#ad9ab5; font-size:11px; letter-spacing:1px; }

.av-panel{
	position:relative;
	padding:28px;
	border:1px solid rgba(255,255,255,.13);
	border-radius:30px;
	background:linear-gradient(145deg,rgba(53,25,65,.88),rgba(18,10,24,.9));
	box-shadow:0 34px 90px rgba(0,0,0,.46),inset 0 1px rgba(255,255,255,.08);
	backdrop-filter:blur(22px);
}
.av-panel:before{ content:""; position:absolute; inset:-1px; z-index:-1; border-radius:31px; background:linear-gradient(135deg,rgba(234,121,255,.25),transparent 34%,rgba(85,231,239,.1)); }
.av-panel-head{ display:flex; align-items:center; gap:16px; }
.av-logo{ width:66px; height:66px; flex:0 0 66px; display:grid; place-items:center; border-radius:22px; background:linear-gradient(145deg,rgba(233,121,255,.2),rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.12); }
.av-logo img{ max-width:52px; max-height:52px; object-fit:contain; }
.av-panel-head h2{ margin:1px 0 3px; font-size:26px; line-height:1; }
.av-panel-head p{ margin:0; color:var(--av-muted); font-size:12px; }
.av-japanese{ display:block; color:var(--av-pink); font-size:11px; font-weight:800; letter-spacing:1.8px; }

.av-actions{ display:grid; gap:10px; margin-top:24px; }
.av-action{ width:100%; min-height:67px; display:grid; grid-template-columns:46px 1fr 18px; align-items:center; gap:12px; padding:9px 14px 9px 10px; border:1px solid rgba(255,255,255,.1); border-radius:18px; color:var(--av-text); text-align:left; background:rgba(255,255,255,.045); cursor:pointer; transition:transform .2s ease,border-color .2s ease,background .2s ease; }
.av-action:hover{ transform:translateY(-2px); border-color:rgba(231,121,255,.42); background:rgba(255,255,255,.075); }
.av-action-primary{ border-color:rgba(240,141,255,.5); background:linear-gradient(100deg,rgba(211,77,238,.93),rgba(111,44,178,.94)); box-shadow:0 16px 34px rgba(177,45,212,.22); }
.av-action-primary:hover{ background:linear-gradient(100deg,#df5cf2,#853dcc); }
.av-action-icon{ width:46px; height:46px; display:grid; place-items:center; border-radius:14px; background:rgba(255,255,255,.1); box-shadow:inset 0 1px rgba(255,255,255,.12); }
.av-action strong,.av-action small{ display:block; }
.av-action strong{ font-size:14px; }
.av-action small{ margin-top:3px; color:rgba(255,255,255,.62); font-size:10px; }

.av-divider{ display:flex; align-items:center; gap:12px; margin:23px 0 17px; color:#8f7f96; font-size:9px; font-weight:900; letter-spacing:1.7px; }
.av-divider:before,.av-divider:after{ content:""; flex:1; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.15)); }
.av-divider:after{ transform:scaleX(-1); }
.av-active-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.av-active-head strong,.av-active-head small{ display:block; }
.av-active-head strong{ font-size:13px; }
.av-active-head small{ margin-top:3px; color:var(--av-muted); font-size:10px; }
.av-active-head>span{ padding:6px 10px; border-radius:999px; color:#7ff0b0; background:rgba(82,229,151,.1); font-size:10px; }
.av-active-list{ display:flex; gap:8px; margin-top:13px; overflow-x:auto; padding:2px 1px 8px; scrollbar-width:none; }
.av-active-list::-webkit-scrollbar{ display:none; }
.av-member{ width:54px; flex:0 0 54px; text-align:center; }
.av-avatar{ position:relative; display:block; width:48px; height:48px; margin:0 auto; padding:2px; border-radius:16px; background:linear-gradient(145deg,var(--av-pink),var(--av-cyan)); }
.av-avatar img{ width:100%; height:100%; object-fit:cover; border:2px solid #23102c; border-radius:14px; }
.av-avatar i{ position:absolute; right:-1px; bottom:0; width:10px; height:10px; border:2px solid #24102d; border-radius:50%; background:#57e99c; box-shadow:0 0 8px #57e99c; }
.av-member>span:last-child{ display:block; margin-top:6px; overflow:hidden; color:#d6c8dc; font-size:9px; white-space:nowrap; text-overflow:ellipsis; }
.av-empty{ width:100%; display:flex; align-items:center; justify-content:center; gap:9px; min-height:54px; border:1px dashed rgba(255,255,255,.12); border-radius:14px; color:#9f91a6; font-size:11px; }

.av-player{ display:grid; grid-template-columns:54px 1fr auto; align-items:center; gap:13px; margin-top:16px; padding:12px; border:1px solid rgba(255,255,255,.12); border-radius:19px; background:rgba(7,6,12,.42); }
.av-player.is-empty{ opacity:.65; }
.av-cover{ position:relative; width:54px; height:54px; display:grid; place-items:center; overflow:hidden; border-radius:17px; color:#fff; background:linear-gradient(145deg,var(--av-pink),#6b2ab5 58%,#193c63); }
.av-cover:before{ content:""; position:absolute; width:36px; height:36px; border:1px solid rgba(255,255,255,.22); border-radius:50%; }
.av-cover i{ position:relative; z-index:2; }
.av-cover span{ position:absolute; inset:auto -15px -20px auto; width:44px; height:44px; border-radius:50%; background:rgba(85,231,239,.35); filter:blur(8px); }
.av-track{ min-width:0; position:relative; }
.av-track small{ display:block; color:var(--av-pink); font-size:8px; font-weight:900; letter-spacing:1.4px; }
.av-track strong{ display:block; margin-top:4px; overflow:hidden; font-size:12px; white-space:nowrap; text-overflow:ellipsis; }
.av-equalizer{ display:flex; align-items:flex-end; gap:2px; height:10px; margin-top:5px; }
.av-equalizer i{ display:block; width:2px; height:3px; border-radius:4px; background:var(--av-cyan); }
.av-player.is-playing .av-equalizer i{ animation:avEq .75s ease-in-out infinite alternate; }
.av-player.is-playing .av-equalizer i:nth-child(2){ animation-delay:-.4s; }
.av-player.is-playing .av-equalizer i:nth-child(3){ animation-delay:-.2s; }
.av-player.is-playing .av-equalizer i:nth-child(4){ animation-delay:-.55s; }
@keyframes avEq{ to{ height:10px; } }
.av-player-buttons{ display:flex; align-items:center; gap:4px; }
.av-player-buttons button{ width:31px; height:31px; display:grid; place-items:center; border:0; border-radius:10px; color:#c6b9cc; background:transparent; cursor:pointer; }
.av-player-buttons button:hover{ color:#fff; background:rgba(255,255,255,.08); }
.av-player-buttons .av-play{ width:39px; height:39px; color:#25102b; background:linear-gradient(145deg,#f1a0ff,#bf47df); box-shadow:0 8px 20px rgba(199,71,223,.25); }
.av-panel-footer{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:17px; padding-top:15px; border-top:1px solid rgba(255,255,255,.08); color:#95869d; font-size:10px; }
.av-panel-footer span{ display:flex; align-items:center; gap:6px; }
.av-panel-footer i{ color:#78ddc9; }
.av-panel-footer button{ border:0; padding:4px; color:#dda0e9; background:transparent; cursor:pointer; font-size:10px; }

.av-footer{ position:relative; z-index:3; width:min(1240px,calc(100% - 40px)); min-height:64px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:24px; border-top:1px solid rgba(255,255,255,.08); color:#8d7e95; font-size:10px; }
.av-footer nav{ display:flex; gap:18px; }
.av-footer a{ color:#a99aaf!important; text-decoration:none!important; }
.av-footer a:hover{ color:#fff!important; }
.av-login-wrap .section{ position:absolute; width:1px; height:1px; overflow:hidden; }

/* Native CodyChat 11 modal accents */
body:has(.av-login-wrap) #small_modal_in{ max-width:430px; border:1px solid rgba(232,121,255,.22); border-radius:24px; background:#211129; box-shadow:0 30px 90px rgba(0,0,0,.58); }
body:has(.av-login-wrap) #small_modal_content{ color:#fff; }
body:has(.av-login-wrap) #small_modal_content .full_input,
body:has(.av-login-wrap) #small_modal_content select{ min-height:48px; border:1px solid rgba(255,255,255,.13); border-radius:13px; color:#fff; background:rgba(255,255,255,.07); }
body:has(.av-login-wrap) #small_modal_content .theme_btn{ border-radius:13px; background:linear-gradient(100deg,#dd62ef,#7c35c2); }

#intro_top { background: rgb(4 47 76 / 0%) !important; }
#intro_top::before { background: rgb(4 47 76 / 0%) !important; }

@media (max-width:1050px){
	.av-main{ grid-template-columns:minmax(0,.95fr) minmax(390px,1.05fr); gap:30px; }
	.av-hero{ min-height:650px; }
	.av-hero h1{ font-size:54px; }
	.av-character-stage{ width:95%; right:-13%; }
}

@media (max-width:820px){
	.av-topbar{ min-height:72px; }
	.av-main{ width:min(620px,calc(100% - 28px)); grid-template-columns:1fr; padding-top:10px; }
	.av-hero{ min-height:640px; border:1px solid rgba(255,255,255,.1); border-radius:32px; overflow:hidden; padding:28px; background:linear-gradient(180deg,rgba(160,40,190,.14),rgba(5,4,8,.2)); }
	.av-hero h1{ max-width:90%; font-size:clamp(42px,11vw,66px); }
	.av-character-stage{ width:92%; height:76%; right:-7%; bottom:0; }
	.av-character-tag{ right:7%; }
	.av-hero-copy{ left:28px; bottom:24px; }
	.av-panel{ margin-top:-18px; }
}

@media (max-width:560px){
	.av-topbar{ width:calc(100% - 24px); }
	.av-brand strong{ max-width:155px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
	.av-brand small,.av-live-chip{ display:none; }
	.av-main{ width:calc(100% - 18px); gap:16px; padding-bottom:28px; }
	.av-hero{ min-height:560px; padding:22px; border-radius:26px; }
	.av-kicker{ font-size:8px; }
	.av-hero h1{ margin-top:13px; font-size:42px; letter-spacing:-2px; }
	.av-lead{ max-width:78%; font-size:12px; }
	.av-character-stage{ width:112%; height:78%; right:-25%; }
	.av-moon{ width:60%; right:17%; top:14%; }
	.av-character-tag{ display:none; }
	.av-hero-copy{ left:22px; bottom:20px; }
	.av-hero-copy strong{ font-size:25px; }
	.av-panel{ padding:20px 16px; border-radius:25px; }
	.av-panel-head{ gap:12px; }
	.av-logo{ width:56px; height:56px; flex-basis:56px; border-radius:17px; }
	.av-logo img{ max-width:44px; max-height:44px; }
	.av-panel-head h2{ font-size:22px; }
	.av-action{ min-height:62px; grid-template-columns:42px 1fr 16px; }
	.av-action-icon{ width:42px; height:42px; }
	.av-player{ grid-template-columns:48px 1fr auto; gap:9px; padding:9px; }
	.av-cover{ width:48px; height:48px; }
	.av-player-buttons button:not(.av-play){ display:none; }
	.av-footer{ width:calc(100% - 24px); flex-direction:column; justify-content:center; gap:8px; padding:18px 0; }
}

@media (prefers-reduced-motion:reduce){
	.av-petal,.av-player.is-playing .av-equalizer i{ animation:none!important; }
	.av-action{ transition:none; }
}