/* OCLOVE interface polish — discovery, navigation, controls, and chat */
:root{--oc-rail:236px;--oc-bg:#0b0b0d;--oc-surface:#161619;--oc-raised:#1e1e22;--oc-line:rgba(255,255,255,.085);--oc-line-strong:rgba(255,255,255,.15);--oc-text:#f7f6f8;--oc-soft:#b5b2ba;--oc-muted:#817e87;--oc-accent:#d65d91;--oc-focus:0 0 0 3px rgba(241,122,171,.2);--oc-ease:cubic-bezier(.22,1,.36,1)}
body[data-product-version="v02"]{color:var(--oc-text)!important;background:var(--oc-bg)!important}
body[data-product-version="v02"] button:focus-visible,body[data-product-version="v02"] [role="button"]:focus-visible,body[data-product-version="v02"] input:focus-visible,body[data-product-version="v02"] textarea:focus-visible{outline:0!important;box-shadow:var(--oc-focus)!important}
@media (min-width:861px) and (hover:hover) and (pointer:fine){
 body[data-product-version="v02"] .locale-menu-trigger{width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important;justify-content:center!important;padding:0!important;border-radius:50%!important}
 body[data-product-version="v02"] .locale-menu-trigger>span,body[data-product-version="v02"] .locale-menu-trigger svg{display:none!important}
 body[data-product-version="v02"] .locale-menu-trigger:after{content:"EN";color:rgba(255,255,255,.8);font-size:11px;font-weight:850}
 html[data-locale="de"] body[data-product-version="v02"] .locale-menu-trigger:after{content:"DE"}html[data-locale="pt-BR"] body[data-product-version="v02"] .locale-menu-trigger:after{content:"PT"}html[data-locale="ja"] body[data-product-version="v02"] .locale-menu-trigger:after{content:"JP"}html[data-locale="ko"] body[data-product-version="v02"] .locale-menu-trigger:after{content:"KR"}html[data-locale="zh-TW"] body[data-product-version="v02"] .locale-menu-trigger:after{content:"繁"}html[data-locale="zh-CN"] body[data-product-version="v02"] .locale-menu-trigger:after{content:"简"}
 body[data-product-version="v02"] .locale-menu-popover{top:calc(100% + 10px)!important;width:202px!important;padding:8px!important;border-color:var(--oc-line-strong)!important;border-radius:14px!important;background:rgba(25,25,29,.98)!important;box-shadow:0 24px 64px rgba(0,0,0,.48)!important}
 body[data-product-version="v02"] .locale-menu-popover button{min-height:40px!important;border-radius:9px!important}
}
@media (min-width:861px){
 body[data-product-version="v02"] .topbar{min-height:64px!important;padding:11px 24px!important;gap:12px!important;border-bottom-color:var(--oc-line)!important;background:rgba(13,13,15,.94)!important;box-shadow:0 1px rgba(0,0,0,.22)!important}
 body[data-product-version="v02"] .search-box{width:min(430px,40vw)!important;height:40px!important;margin-left:auto!important;border-color:transparent!important;border-radius:999px!important;background:#242428!important}
 body[data-product-version="v02"] .search-box:focus-within{border-color:rgba(241,122,171,.5)!important;background:#29292e!important;box-shadow:var(--oc-focus)!important}
 body[data-product-version="v02"] .search-box input{font-size:13px!important}body[data-product-version="v02"] .global-actions{flex:0 0 auto!important;margin-left:0!important}
 body[data-product-version="v02"] .desktop-account-button{min-height:40px!important;padding:0 13px 0 7px!important;border-color:transparent!important;border-radius:999px!important;background:transparent!important;box-shadow:none!important}
 body[data-product-version="v02"] .desktop-account-button:hover{border-color:var(--oc-line)!important;background:rgba(255,255,255,.055)!important}body[data-product-version="v02"] .desktop-account-avatar{border-radius:50%!important;background:linear-gradient(145deg,#a84c76,#e683ad)!important}
 body[data-product-version="v02"] #explore{padding-top:86px!important;padding-right:24px!important;padding-bottom:64px!important;background:radial-gradient(circle at 42% -12%,rgba(184,74,122,.11),transparent 30%),var(--oc-bg)!important}
 body[data-product-version="v02"] #explore .quick-panel,body[data-product-version="v02"] #explore .recent-panel,body[data-product-version="v02"] #explore .browse-board,body[data-product-version="v02"] #explore .filter-row,body[data-product-version="v02"] #explore .character-grid{width:min(100%,1500px)!important;margin-right:auto!important;margin-left:auto!important}
 body[data-product-version="v02"] #explore .quick-panel{position:relative!important;isolation:isolate!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(320px,39%)!important;min-height:258px!important;margin-bottom:30px!important;overflow:hidden!important;border:1px solid var(--oc-line)!important;border-radius:18px!important;background:radial-gradient(circle at 38% 34%,rgba(255,179,125,.2),transparent 30%),linear-gradient(115deg,#35141f 0,#5b2532 47%,#160f16 100%)!important;box-shadow:0 22px 58px rgba(0,0,0,.25)!important}
 body[data-product-version="v02"] #explore .quick-panel:before{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(24,10,16,.16),rgba(24,10,16,.02) 55%,rgba(9,7,10,.24)),radial-gradient(circle at 28% 115%,rgba(255,186,138,.32),transparent 38%);content:"";pointer-events:none}
 body[data-product-version="v02"] #explore .intro-block{position:relative!important;z-index:2!important;align-self:center!important;max-width:760px!important;padding:34px 42px!important}
 body[data-product-version="v02"] #explore .intro-block .eyebrow{margin:0 0 10px!important;color:#ffabc8!important;font-size:11px!important;font-weight:850!important;letter-spacing:.14em!important;text-transform:uppercase!important}
 body[data-product-version="v02"] #explore .intro-block h1{max-width:720px!important;margin:0!important;color:#fff7f1!important;font-size:clamp(30px,3vw,46px)!important;font-weight:850!important;line-height:1.03!important;letter-spacing:-.035em!important;text-wrap:balance!important;text-shadow:0 3px 24px rgba(30,6,15,.24)!important}
 body[data-product-version="v02"] #explore .intro-block>p:not(.eyebrow){display:-webkit-box!important;max-width:650px!important;margin:14px 0 0!important;overflow:hidden!important;color:rgba(255,242,237,.72)!important;font-size:13px!important;line-height:1.65!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important}
 body[data-product-version="v02"] #explore .inline-creator,body[data-product-version="v02"] #explore .signal-row,body[data-product-version="v02"] #explore .launch-path{display:none!important}
 body[data-product-version="v02"] #explore .creator-actions{display:flex!important;gap:10px!important;margin-top:22px!important}
 body[data-product-version="v02"] #explore .creator-actions button,body[data-product-version="v02"] #explore .selected-mini button{min-height:44px!important;padding:0 20px!important;border-radius:11px!important;font-size:13px!important;font-weight:800!important;cursor:pointer!important;transition:transform .16s var(--oc-ease),border-color .16s,background-color .16s,box-shadow .18s!important}
 body[data-product-version="v02"] #explore .create-hero-button{border:0!important;color:#2b111c!important;background:#fff2e9!important;box-shadow:0 10px 26px rgba(27,8,16,.24)!important}body[data-product-version="v02"] #explore .import-card-button{border:1px solid rgba(255,255,255,.2)!important;color:rgba(255,255,255,.82)!important;background:rgba(255,255,255,.07)!important}
 body[data-product-version="v02"] #explore .selected-mini{position:relative!important;display:flex!important;min-width:0!important;min-height:258px!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-end!important;padding:28px 30px!important;overflow:hidden!important;border:0!important;border-left:1px solid rgba(255,255,255,.09)!important;border-radius:0!important;color:#fff!important;background:linear-gradient(180deg,rgba(8,7,10,.03) 18%,rgba(8,7,10,.94) 100%),url("assets/roles/xiewenchuan.jpg") center 29%/cover no-repeat!important;box-shadow:inset 24px 0 48px rgba(32,13,22,.2)!important}
 body[data-product-version="v02"] #explore .selected-mini>span{padding:5px 8px!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:999px!important;color:rgba(255,255,255,.9)!important;background:rgba(12,10,14,.42)!important;backdrop-filter:blur(10px)!important;font-size:10px!important;font-weight:800!important}
 body[data-product-version="v02"] #explore .selected-mini>strong{margin-top:10px!important;font-size:24px!important;line-height:1.1!important}body[data-product-version="v02"] #explore .selected-mini>em{margin-top:5px!important;color:#f2b2ca!important;font-size:11px!important;font-style:normal!important;font-weight:750!important}
 body[data-product-version="v02"] #explore .selected-mini>p{display:-webkit-box!important;max-width:440px!important;margin:8px 0 14px!important;overflow:hidden!important;color:rgba(255,255,255,.74)!important;font-size:12px!important;line-height:1.5!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important}body[data-product-version="v02"] #explore .selected-mini button{min-height:40px!important;border:0!important;color:#fff!important;background:linear-gradient(135deg,#c54f83,#9d3f69)!important;box-shadow:0 12px 26px rgba(87,23,50,.32)!important}
 body[data-product-version="v02"] #explore .browse-board{display:grid!important;grid-template-columns:minmax(220px,1fr) auto!important;align-items:end!important;gap:18px!important;margin-bottom:12px!important}body[data-product-version="v02"] #explore .browse-copy span{color:#cf7199!important;font-size:10px!important;letter-spacing:.11em!important}body[data-product-version="v02"] #explore .browse-copy strong{margin-top:4px!important;font-size:24px!important;letter-spacing:-.02em!important}body[data-product-version="v02"] #explore .browse-copy p{margin-top:5px!important;color:var(--oc-muted)!important;font-size:12px!important}
 body[data-product-version="v02"] #explore .browse-tabs{gap:5px!important;padding:4px!important;border:1px solid var(--oc-line)!important;border-radius:999px!important;background:var(--oc-surface)!important}body[data-product-version="v02"] #explore .browse-tabs button{min-height:32px!important;padding:0 13px!important;border:0!important;border-radius:999px!important;color:var(--oc-muted)!important;background:transparent!important;font-size:11px!important}body[data-product-version="v02"] #explore .browse-tabs button:hover{color:var(--oc-soft)!important;background:rgba(255,255,255,.045)!important}body[data-product-version="v02"] #explore .browse-tabs button.active{color:#fff!important;background:#3a2945!important;box-shadow:inset 0 0 0 1px rgba(220,119,164,.22)!important}
 body[data-product-version="v02"] #explore .filter-row{display:flex!important;gap:7px!important;margin-bottom:12px!important;padding:0!important;overflow-x:auto!important;scrollbar-width:none!important}body[data-product-version="v02"] #explore .filter-row::-webkit-scrollbar{display:none!important}body[data-product-version="v02"] #explore .filter-row button{min-height:34px!important;padding:0 14px!important;flex:0 0 auto!important;border:1px solid transparent!important;border-radius:8px!important;color:#9b98a1!important;background:#1a1a1e!important;font-size:11px!important;font-weight:700!important;cursor:pointer!important}body[data-product-version="v02"] #explore .filter-row button:hover{color:#e8e5eb!important;background:#222227!important}body[data-product-version="v02"] #explore .filter-row button.active{color:#fff!important;border-color:rgba(235,133,176,.28)!important;background:#31222c!important}
 body[data-product-version="v02"] #characterGrid{grid-template-columns:repeat(auto-fill,minmax(222px,1fr))!important;gap:14px!important}body[data-product-version="v02"] #characterGrid .role-card{display:grid!important;grid-template-rows:auto minmax(142px,1fr)!important;height:auto!important;aspect-ratio:auto!important;overflow:hidden!important;border-color:var(--oc-line)!important;border-radius:12px!important;background:var(--oc-surface)!important;box-shadow:0 1px rgba(255,255,255,.025)!important}body[data-product-version="v02"] #characterGrid .role-card:after{display:none!important}
 body[data-product-version="v02"] #characterGrid .role-card figure{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;aspect-ratio:1.05/1!important;overflow:hidden!important;background:#17171a!important}body[data-product-version="v02"] #characterGrid .role-card figure:after{position:absolute;inset:auto 0 0;height:34%;background:linear-gradient(180deg,transparent,rgba(10,10,12,.48));content:"";pointer-events:none}body[data-product-version="v02"] #characterGrid .role-card figure img{position:relative!important;inset:auto!important;width:100%!important;height:100%!important;object-fit:cover!important}
 body[data-product-version="v02"] #characterGrid .role-rank{top:10px!important;left:10px!important;padding:5px 7px!important;border-color:rgba(255,255,255,.16)!important;background:rgba(8,8,10,.56)!important;box-shadow:0 4px 16px rgba(0,0,0,.18)!important}body[data-product-version="v02"] #characterGrid .role-topline{top:11px!important;right:10px!important}body[data-product-version="v02"] #characterGrid .role-topline span{max-width:126px!important;padding:4px 7px!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:999px!important;color:rgba(255,255,255,.78)!important;background:rgba(8,8,10,.42)!important;backdrop-filter:blur(8px)!important}
 body[data-product-version="v02"] #characterGrid .role-copy{position:relative!important;inset:auto!important;display:flex!important;min-width:0!important;flex-direction:column!important;padding:13px 13px 12px!important;color:#fff!important;background:linear-gradient(180deg,#19191c,#161619)!important}body[data-product-version="v02"] #characterGrid .role-copy strong{overflow:hidden!important;font-size:15px!important;line-height:1.25!important;text-overflow:ellipsis!important;text-shadow:none!important;white-space:nowrap!important}body[data-product-version="v02"] #characterGrid .role-copy p{min-height:36px!important;margin:6px 0 9px!important;color:#a9a5ad!important;font-size:11px!important;line-height:1.55!important}
 body[data-product-version="v02"] #characterGrid .role-tags{display:flex!important;min-height:22px!important;gap:5px!important;margin-bottom:10px!important;overflow:hidden!important}body[data-product-version="v02"] #characterGrid .role-tags i{padding:3px 6px!important;flex:0 0 auto!important;border:0!important;border-radius:5px!important;color:#a9a5ad!important;background:#2a292e!important;font-size:9px!important;font-style:normal!important;font-weight:700!important;white-space:nowrap!important}body[data-product-version="v02"] #characterGrid .role-foot{margin-top:auto!important;padding-top:8px!important;border-top:1px solid rgba(255,255,255,.055)!important;color:#77747d!important;font-size:9px!important}body[data-product-version="v02"] #characterGrid .role-foot em:last-child{color:#df7da6!important}
 body[data-product-version="v02"] #characterGrid .role-card:hover{border-color:rgba(226,118,164,.38)!important;box-shadow:0 16px 38px rgba(0,0,0,.22)!important;transform:translateY(-3px)!important}body[data-product-version="v02"] #characterGrid .role-card:hover figure img{filter:saturate(1.04) contrast(1.02)!important;transform:scale(1.035)!important}
}
@media (min-width:1200px){
 body[data-product-version="v02"] .app-rail{width:var(--oc-rail)!important;padding:18px 16px 16px!important;border-right-color:var(--oc-line)!important;background:#111113!important}
 body[data-product-version="v02"] .rail-logo{display:flex!important;width:100%!important;height:46px!important;align-items:center!important;gap:10px!important;padding:0 10px!important;color:#fff!important;background:transparent!important;box-shadow:none!important}body[data-product-version="v02"] .rail-logo span{display:grid!important;width:30px!important;height:30px!important;place-items:center!important;flex:0 0 30px!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:9px!important;color:#fff!important;background:linear-gradient(145deg,#8c3d61,#e277a4)!important;font-size:11px!important;font-weight:900!important;box-shadow:0 8px 22px rgba(146,50,91,.24)!important}body[data-product-version="v02"] .rail-logo:after{content:"oclove";font-size:19px;font-weight:850;letter-spacing:-.035em}
 body[data-product-version="v02"] .rail-stack-main{width:100%!important;gap:5px!important;margin-top:22px!important}body[data-product-version="v02"] .rail-action{display:flex!important;width:100%!important;min-height:46px!important;align-items:center!important;justify-content:flex-start!important;gap:12px!important;padding:0 13px!important;border:1px solid transparent!important;border-radius:11px!important}body[data-product-version="v02"] .rail-action:hover{color:#d9d6dd!important;background:rgba(255,255,255,.035)!important}body[data-product-version="v02"] .rail-action.active,body[data-product-version="v02"] .rail-action[aria-current="page"]{color:#fff!important;border-color:rgba(255,255,255,.035)!important;background:#1c1c1f!important}body[data-product-version="v02"] .rail-action .rail-icon{width:20px!important;height:20px!important;flex:0 0 20px!important}body[data-product-version="v02"] .rail-action .rail-icon svg{width:20px!important;height:20px!important}body[data-product-version="v02"] .rail-action em{font-size:13px!important;font-weight:700!important}
 body[data-product-version="v02"] .topbar{left:var(--oc-rail)!important}body[data-product-version="v02"] #explore{padding-left:calc(var(--oc-rail) + 24px)!important}body[data-product-version="v02"] #chatView{left:var(--oc-rail)!important}
}@media (min-width:1181px){
 body[data-product-version="v02"][data-view="chat"]{--v02-chat-detail:clamp(340px,25vw,400px)!important;background:#0b0b0d!important}body[data-product-version="v02"][data-view="chat"] #chatView .chat-scrim{background:radial-gradient(circle at 62% 18%,rgba(116,47,78,.09),transparent 32%),#0b0b0d!important}
 body[data-product-version="v02"][data-view="chat"] #chatView .chat-main{width:100%!important;max-width:none!important;margin:0!important;padding:24px clamp(24px,4vw,64px) 20px!important;background:#0d0d0f!important}body[data-product-version="v02"][data-view="chat"] #chatView .chat-head,body[data-product-version="v02"][data-view="chat"] #chatView #chatLog.chat-log,body[data-product-version="v02"][data-view="chat"] #chatView #quickReplyRow.quick-reply-row,body[data-product-version="v02"][data-view="chat"] #chatView #chatForm.chat-composer{width:min(100%,880px)!important}
 body[data-product-version="v02"][data-view="chat"] #chatView .chat-head{min-height:62px!important;padding:7px 0 14px!important;border-bottom:1px solid rgba(255,255,255,.055)!important}body[data-product-version="v02"][data-view="chat"] #chatView .ghost-nav{min-height:38px!important;border-color:var(--oc-line)!important;border-radius:10px!important;color:#b7b4bb!important;background:#17171a!important}body[data-product-version="v02"][data-view="chat"] #chatView .ghost-nav:hover,body[data-product-version="v02"][data-view="chat"] #chatView .chat-menu-trigger:hover{color:#fff!important;border-color:var(--oc-line-strong)!important;background:#212126!important}
 body[data-product-version="v02"][data-view="chat"] #chatView .chat-head-avatar{width:38px!important;height:38px!important;flex-basis:38px!important;border-color:rgba(255,255,255,.14)!important}body[data-product-version="v02"][data-view="chat"] #chatView .chat-identity h2{font-size:18px!important;letter-spacing:-.01em!important}body[data-product-version="v02"][data-view="chat"] #chatView .chat-menu-trigger{width:38px!important;height:38px!important;border-color:var(--oc-line)!important;border-radius:10px!important;color:#aaa7ae!important;background:#17171a!important}
 body[data-product-version="v02"][data-view="chat"] #chatView .chat-log{gap:16px!important;padding:24px 2px 22px!important;mask-image:linear-gradient(transparent,#000 14px,#000 calc(100% - 12px),transparent)!important}body[data-product-version="v02"][data-view="chat"] #chatView .message-body{max-width:min(680px,calc(100% - 54px))!important;padding:12px 15px 13px!important;border-color:rgba(255,255,255,.06)!important;border-radius:13px 13px 13px 4px!important;color:#e9e7eb!important;background:#242427!important;box-shadow:none!important;backdrop-filter:none!important}body[data-product-version="v02"][data-view="chat"] #chatView .message.oc .message-body{border-color:rgba(230,113,163,.16)!important;border-radius:13px 13px 4px 13px!important;background:linear-gradient(135deg,#79415c,#66354d)!important}body[data-product-version="v02"][data-view="chat"] #chatView .message.scene .message-body{border-radius:12px!important;color:#b9b5bd!important;background:#19191c!important}body[data-product-version="v02"][data-view="chat"] #chatView .message-body p{font-size:14px!important;line-height:1.7!important}
 body[data-product-version="v02"][data-view="chat"] #chatView .quick-reply-row{gap:7px!important;padding-bottom:9px!important}body[data-product-version="v02"][data-view="chat"] #chatView .quick-reply-row button{min-height:34px!important;border-color:var(--oc-line)!important;border-radius:9px!important;color:#a7a4ac!important;background:#17171a!important;font-size:11px!important}body[data-product-version="v02"][data-view="chat"] #chatView .quick-reply-row button:hover{color:#fff!important;border-color:rgba(226,118,164,.28)!important;background:#2a2027!important}
 body[data-product-version="v02"][data-view="chat"] #chatView .chat-composer{grid-template-columns:minmax(0,1fr) 44px!important;min-height:54px!important;padding:5px!important;border-color:var(--oc-line-strong)!important;border-radius:14px!important;background:#27272b!important;box-shadow:0 16px 46px rgba(0,0,0,.24)!important;backdrop-filter:none!important}body[data-product-version="v02"][data-view="chat"] #chatView .chat-composer:focus-within{border-color:rgba(231,118,166,.48)!important;box-shadow:var(--oc-focus),0 16px 46px rgba(0,0,0,.24)!important}body[data-product-version="v02"][data-view="chat"] #chatView .chat-composer input{height:42px!important;padding:0 14px!important}body[data-product-version="v02"][data-view="chat"] #chatView .chat-composer button{width:42px!important;height:42px!important;border-radius:11px!important;background:linear-gradient(145deg,#e06699,#b74776)!important;box-shadow:0 8px 20px rgba(153,48,92,.28)!important}
 body[data-product-version="v02"][data-view="chat"] #chatView .chat-relationship-rail{border-left:1px solid var(--oc-line)!important;color:#f3f1f4!important;background:#121214!important;box-shadow:-16px 0 44px rgba(0,0,0,.16)!important}body[data-product-version="v02"][data-view="chat"] #chatView .chat-rail-cover{min-height:42vh!important;border-bottom:1px solid var(--oc-line)!important}body[data-product-version="v02"][data-view="chat"] #chatView .chat-rail-cover-scrim{background:linear-gradient(180deg,rgba(7,7,9,.06) 35%,rgba(7,7,9,.88) 100%),linear-gradient(90deg,rgba(7,7,9,.06),transparent)!important}body[data-product-version="v02"][data-view="chat"] #chatView .chat-rail-cover-actions button{border-color:rgba(255,255,255,.16)!important;color:#fff!important;background:rgba(10,10,12,.46)!important;backdrop-filter:blur(12px)!important}
 body[data-product-version="v02"][data-view="chat"] #chatView .chat-rail-heading,body[data-product-version="v02"][data-view="chat"] #chatView .chat-rail-relation,body[data-product-version="v02"][data-view="chat"] #chatView .chat-rail-memory{border-color:rgba(255,255,255,.065)!important}body[data-product-version="v02"][data-view="chat"] #chatView .chat-rail-heading>span,body[data-product-version="v02"][data-view="chat"] #chatView .chat-rail-relation>span,body[data-product-version="v02"][data-view="chat"] #chatView .chat-rail-memory>span{color:#a67088!important}body[data-product-version="v02"][data-view="chat"] #chatView .chat-rail-heading h3,body[data-product-version="v02"][data-view="chat"] #chatView .chat-rail-relation strong{color:#fff!important}body[data-product-version="v02"][data-view="chat"] #chatView .chat-rail-tags i,body[data-product-version="v02"][data-view="chat"] #chatView .chat-rail-tabs button{border-color:transparent!important;color:#8e8b93!important;background:#1c1c20!important}body[data-product-version="v02"][data-view="chat"] #chatView .chat-rail-tabs button.is-active{color:#fff!important;background:#35232c!important}body[data-product-version="v02"][data-view="chat"] #chatView .chat-rail-stats>div{border-color:var(--oc-line)!important;background:#19191c!important}body[data-product-version="v02"][data-view="chat"] #chatView .chat-rail-memory p,body[data-product-version="v02"][data-view="chat"] #chatView .chat-rail-intro p{color:#a9a5ad!important}
 body[data-product-version="v02"][data-view="chat"] #chatView .chat-rail-footer-actions{gap:8px!important;padding-top:12px!important;border-top:1px solid var(--oc-line)!important}body[data-product-version="v02"][data-view="chat"] #chatView .chat-rail-footer-actions button{min-height:40px!important;border-radius:10px!important}body[data-product-version="v02"][data-view="chat"] #chatView .chat-rail-tools{border-color:var(--oc-line-strong)!important;color:#c3bfc6!important;background:transparent!important}body[data-product-version="v02"][data-view="chat"] #chatView .chat-rail-profile{border:0!important;color:#23161c!important;background:#f4edf0!important}body[data-product-version="v02"][data-view="chat"] #chatView .chat-rail-collapse{border-color:var(--oc-line)!important;color:#c5c1c8!important;background:#1c1c1f!important;box-shadow:0 8px 22px rgba(0,0,0,.2)!important}
}
@media (min-width:861px) and (max-width:1199px){body[data-product-version="v02"] #explore .quick-panel{grid-template-columns:minmax(0,1fr) minmax(280px,36%)!important}body[data-product-version="v02"] #explore .intro-block{padding:30px!important}body[data-product-version="v02"] #explore .intro-block h1{font-size:clamp(28px,3.2vw,38px)!important}body[data-product-version="v02"] #characterGrid{grid-template-columns:repeat(auto-fill,minmax(205px,1fr))!important}}
@media (max-width:860px){
 body[data-product-version="v02"] .mobile-top-icon{width:40px!important;height:40px!important;border:1px solid rgba(255,255,255,.08)!important;background:rgba(14,13,16,.56)!important;box-shadow:0 8px 24px rgba(0,0,0,.16)!important}body[data-product-version="v02"] #explore{padding-right:12px!important;padding-left:12px!important}body[data-product-version="v02"] #explore .browse-tabs{gap:7px!important}body[data-product-version="v02"] #explore .browse-tabs button{border-color:rgba(255,255,255,.07)!important;border-radius:999px!important;background:#17171a!important}body[data-product-version="v02"] #explore .browse-tabs button.active{border-color:rgba(228,118,165,.24)!important;background:#392630!important}body[data-product-version="v02"] #characterGrid{gap:10px!important}body[data-product-version="v02"] #characterGrid .role-card{border-radius:12px!important;box-shadow:0 10px 24px rgba(0,0,0,.16)!important}
 body[data-product-version="v02"] #chatView .message-body{border-radius:13px 13px 13px 4px!important}body[data-product-version="v02"] #chatView .message.oc .message-body{border-radius:13px 13px 4px 13px!important}body[data-product-version="v02"] #chatView .chat-composer{border-radius:14px!important}body[data-product-version="v02"] #chatView .chat-composer button{border-radius:11px!important;background:linear-gradient(145deg,#df6598,#b94777)!important}body[data-product-version="v02"] .explore-drawer-panel{border-radius:0 18px 18px 0!important;box-shadow:24px 0 64px rgba(0,0,0,.26)!important}
}
@media (prefers-reduced-motion:reduce){body[data-product-version="v02"] *,body[data-product-version="v02"] *:before,body[data-product-version="v02"] *:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media (min-width:1200px){body[data-product-version="v02"] #profileView,body[data-product-version="v02"] #sharedView,body[data-product-version="v02"] #opsView{width:calc(100% - var(--oc-rail))!important;margin-left:var(--oc-rail)!important}}
/* OCLOVE SVG icon system v1 */
body[data-product-version="v02"] .oc-icon,
body[data-product-version="v02"] .oc-logo-mark {
  display: block;
  flex: 0 0 auto;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body[data-product-version="v02"] .oc-icon {
  width: 20px;
  height: 20px;
  stroke-width: 1.75;
}
body[data-product-version="v02"] .oc-logo-mark {
  width: 32px;
  height: 32px;
  color: #e678a7;
  stroke-width: 2.7;
}
body[data-product-version="v02"] .brand .brand-mark.oc-logo-mark,
body[data-product-version="v02"] .account-brand-mark.oc-logo-mark,
body[data-product-version="v02"] .drawer-logo-mark.oc-logo-mark {
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #e678a7 !important;
  background: none !important;
  box-shadow: none !important;
  font-size: 0 !important;
}
body[data-product-version="v02"] .brand .brand-mark.oc-logo-mark {
  width: 30px !important;
  height: 30px !important;
}
body[data-product-version="v02"] .account-brand-mark.oc-logo-mark,
body[data-product-version="v02"] .drawer-logo-mark.oc-logo-mark {
  width: 34px !important;
  height: 34px !important;
}
body[data-product-version="v02"] .search-box > span,
body[data-product-version="v02"] .drawer-search > span,
body[data-product-version="v02"] .drawer-create-pill > span,
body[data-product-version="v02"] .drawer-locale-heading > span {
  display: grid;
  place-items: center;
}
body[data-product-version="v02"] .search-box .oc-icon,
body[data-product-version="v02"] .drawer-search .oc-icon {
  width: 18px !important;
  height: 18px !important;
  color: #8d8992 !important;
  stroke-width: 1.75 !important;
}
body[data-product-version="v02"] .drawer-create-pill .oc-icon,
body[data-product-version="v02"] .drawer-menu-icon .oc-icon,
body[data-product-version="v02"] .drawer-locale-heading .oc-icon {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 1.75 !important;
}
body[data-product-version="v02"] .drawer-menu-icon {
  display: grid !important;
  width: 28px !important;
  height: 28px !important;
  place-items: center !important;
  border-radius: 0 !important;
  color: #8d8992 !important;
  background: transparent !important;
}
body[data-product-version="v02"] .drawer-menu-item.active .drawer-menu-icon,
body[data-product-version="v02"] .drawer-menu-item[aria-current="page"] .drawer-menu-icon {
  color: #d65d91 !important;
}
body[data-product-version="v02"] #chatView .chat-menu-trigger .oc-icon {
  width: 18px !important;
  height: 18px !important;
  margin: auto !important;
  color: currentColor;
  stroke-width: 1.75 !important;
}
body[data-product-version="v02"] #chatView .chat-composer button .oc-icon {
  width: 18px !important;
  height: 18px !important;
  margin: auto !important;
  color: #fff !important;
  stroke-width: 1.85 !important;
}
@media (min-width: 1200px) {
  body[data-product-version="v02"] .rail-logo .oc-logo-mark {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #e678a7 !important;
    background: none !important;
    box-shadow: none !important;
    stroke-width: 2.65 !important;
  }
  body[data-product-version="v02"] .rail-action .rail-icon {
    display: grid !important;
    width: 20px !important;
    height: 20px !important;
    place-items: center !important;
    flex: 0 0 20px !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #8d8992 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body[data-product-version="v02"] .rail-action .rail-icon .oc-icon {
    width: 20px !important;
    height: 20px !important;
    stroke-width: 1.75 !important;
  }
  body[data-product-version="v02"] .rail-action.active .rail-icon,
  body[data-product-version="v02"] .rail-action[aria-current="page"] .rail-icon {
    color: #ee86b1 !important;
  }
  body[data-product-version="v02"] .rail-action:hover:not(.active) .rail-icon {
    color: #d8d4dc !important;
  }
}
@media (max-width: 860px) {
  body[data-product-version="v02"] .mobile-top-icon .oc-icon {
    width: 20px !important;
    height: 20px !important;
    stroke-width: 1.75 !important;
  }
}
@media (max-width: 1180px) {
  body[data-product-version="v02"][data-view="chat"] #chatView .chat-menu-trigger .oc-icon {
    position: relative !important;
    z-index: 2 !important;
    color: #fff !important;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,.7));
  }
  body[data-product-version="v02"][data-view="chat"] #chatView .chat-menu-trigger::after {
    display: none !important;
    content: none !important;
  }
}
/* OCLOVE Figma-inspired UI3 system v1 */
:root {
  --oc-rail: 232px;
  --oc-ui-canvas: #0c0c0c;
  --oc-ui-panel: #151515;
  --oc-ui-control: #1e1e1e;
  --oc-ui-control-hover: #242424;
  --oc-ui-control-active: #2c2c2c;
  --oc-ui-border: rgba(255, 255, 255, 0.11);
  --oc-ui-border-strong: rgba(255, 255, 255, 0.18);
  --oc-ui-text: #f5f5f5;
  --oc-ui-text-secondary: #b3b3b3;
  --oc-ui-text-muted: #808080;
  --oc-ui-brand: #e66f9f;
  --oc-ui-focus: #0d99ff;
  --oc-ui-radius-xs: 4px;
  --oc-ui-radius-sm: 6px;
  --oc-ui-radius-md: 8px;
  --oc-ui-radius-lg: 12px;
}
body[data-product-version="v02"] {
  color: var(--oc-ui-text) !important;
  background: var(--oc-ui-canvas) !important;
}
body[data-product-version="v02"] button { -webkit-tap-highlight-color: transparent; }
body[data-product-version="v02"] button:focus-visible,
body[data-product-version="v02"] [role="button"]:focus-visible,
body[data-product-version="v02"] input:focus-visible,
body[data-product-version="v02"] textarea:focus-visible {
  outline: 2px solid var(--oc-ui-focus) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}
@media (min-width: 1200px) {
  body[data-product-version="v02"] .app-rail,
  body[data-product-version="v02"][data-view="explore"] .app-rail {
    width: var(--oc-rail) !important;
    padding: 14px 12px !important;
    border-right: 1px solid var(--oc-ui-border) !important;
    background: var(--oc-ui-panel) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  body[data-product-version="v02"] .rail-logo,
  body[data-product-version="v02"][data-view="explore"] .rail-logo {
    display: flex !important;
    width: 100% !important;
    height: 40px !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-radius: var(--oc-ui-radius-sm) !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body[data-product-version="v02"] .rail-logo .oc-logo-mark,
  body[data-product-version="v02"][data-view="explore"] .rail-logo .oc-logo-mark {
    width: 28px !important;
    height: 28px !important;
    color: var(--oc-ui-brand) !important;
    background: none !important;
    box-shadow: none !important;
  }
  body[data-product-version="v02"] .rail-logo::after {
    color: var(--oc-ui-text) !important;
    content: "oclove";
    font-size: 17px !important;
    font-weight: 650 !important;
    letter-spacing: -0.025em !important;
  }
  body[data-product-version="v02"] .rail-stack-main,
  body[data-product-version="v02"][data-view="explore"] .rail-stack-main,
  body[data-product-version="v02"][data-view="explore"] .rail-stack {
    display: grid !important;
    width: 100% !important;
    gap: 2px !important;
    margin-top: 16px !important;
  }
  body[data-product-version="v02"] .app-rail .rail-action,
  body[data-product-version="v02"][data-view="explore"] .app-rail .rail-action,
  body[data-product-version="v02"][data-view="explore"] .app-rail #railCreateCharacterButton {
    position: relative !important;
    display: flex !important;
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 0 10px !important;
    overflow: hidden !important;
    border: 1px solid transparent !important;
    border-radius: var(--oc-ui-radius-sm) !important;
    color: var(--oc-ui-text-secondary) !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    transform: none !important;
    backdrop-filter: none !important;
    transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease !important;
  }
  body[data-product-version="v02"] .app-rail .rail-action:hover,
  body[data-product-version="v02"][data-view="explore"] .app-rail .rail-action:hover {
    border-color: transparent !important;
    color: var(--oc-ui-text) !important;
    background: var(--oc-ui-control-hover) !important;
  }
  body[data-product-version="v02"] .app-rail .rail-action.active,
  body[data-product-version="v02"] .app-rail .rail-action[aria-current="page"],
  body[data-product-version="v02"][data-view="explore"] .app-rail .rail-action.active {
    border-color: var(--oc-ui-border) !important;
    color: var(--oc-ui-text) !important;
    background: var(--oc-ui-control-active) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.025) !important;
  }
  body[data-product-version="v02"] .app-rail .rail-action span.rail-icon,
  body[data-product-version="v02"][data-view="explore"] .app-rail .rail-action span.rail-icon,
  body[data-product-version="v02"][data-view="explore"] .app-rail .rail-action:hover span.rail-icon,
  body[data-product-version="v02"][data-view="explore"] .app-rail .rail-action.active span.rail-icon {
    display: grid !important;
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    place-items: center !important;
    flex: 0 0 24px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: var(--oc-ui-radius-xs) !important;
    color: currentColor !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    transform: none !important;
  }
  body[data-product-version="v02"] .app-rail .rail-action span.rail-icon .oc-icon {
    display: block !important;
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    color: currentColor !important;
    stroke-width: 1.75 !important;
  }
  body[data-product-version="v02"] .app-rail .rail-action em,
  body[data-product-version="v02"][data-view="explore"] .app-rail .rail-action em {
    position: static !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    overflow: visible !important;
    clip: auto !important;
    color: currentColor !important;
    font-size: 13px !important;
    font-style: normal !important;
    font-weight: 550 !important;
    line-height: 1 !important;
    letter-spacing: -0.01em !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }
}
@media (min-width: 861px) {
  body[data-product-version="v02"] .topbar {
    min-height: 60px !important;
    padding: 10px 20px !important;
    border-bottom: 1px solid var(--oc-ui-border) !important;
    background: rgba(18, 18, 18, 0.96) !important;
    box-shadow: none !important;
  }
  body[data-product-version="v02"] .search-box {
    width: min(400px, 38vw) !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 10px !important;
    border: 1px solid var(--oc-ui-border) !important;
    border-radius: var(--oc-ui-radius-sm) !important;
    background: var(--oc-ui-control) !important;
    box-shadow: none !important;
  }
  body[data-product-version="v02"] .search-box:focus-within {
    border-color: var(--oc-ui-focus) !important;
    background: var(--oc-ui-control) !important;
    box-shadow: 0 0 0 1px var(--oc-ui-focus) !important;
  }
  body[data-product-version="v02"] .locale-menu-trigger,
  body[data-product-version="v02"] .desktop-account-button {
    height: 36px !important;
    min-height: 36px !important;
    border: 1px solid transparent !important;
    border-radius: var(--oc-ui-radius-sm) !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body[data-product-version="v02"] .locale-menu-trigger {
    width: 36px !important;
    min-width: 36px !important;
  }
  body[data-product-version="v02"] .locale-menu-trigger:hover,
  body[data-product-version="v02"] .desktop-account-button:hover {
    border-color: var(--oc-ui-border) !important;
    background: var(--oc-ui-control-hover) !important;
  }
}
body[data-product-version="v02"] #explore .quick-panel,
body[data-product-version="v02"] #characterGrid .role-card,
body[data-product-version="v02"] .explore-drawer-panel {
  border-radius: var(--oc-ui-radius-lg) !important;
}
body[data-product-version="v02"] #explore .creator-actions button,
body[data-product-version="v02"] #explore .selected-mini button,
body[data-product-version="v02"] #explore .filter-row button,
body[data-product-version="v02"] #explore .browse-tabs,
body[data-product-version="v02"] #explore .browse-tabs button,
body[data-product-version="v02"] .drawer-search,
body[data-product-version="v02"] .drawer-create-pill,
body[data-product-version="v02"] .drawer-menu-item,
body[data-product-version="v02"] .drawer-locale-list button,
body[data-product-version="v02"] #chatView .ghost-nav,
body[data-product-version="v02"] #chatView .chat-menu-trigger,
body[data-product-version="v02"] #chatView .quick-reply-row button,
body[data-product-version="v02"] #chatView .chat-composer,
body[data-product-version="v02"] #chatView .chat-composer button {
  border-radius: var(--oc-ui-radius-sm) !important;
}
body[data-product-version="v02"] #explore .creator-actions button,
body[data-product-version="v02"] #explore .selected-mini button {
  background-image: none !important;
  box-shadow: none !important;
}
body[data-product-version="v02"] #explore .create-hero-button {
  color: #111 !important;
  background: #f5f5f5 !important;
}
body[data-product-version="v02"] #explore .selected-mini button,
body[data-product-version="v02"] #chatView .chat-composer button {
  color: #fff !important;
  background: #c84f80 !important;
  background-image: none !important;
  box-shadow: none !important;
}
body[data-product-version="v02"] #explore .browse-tabs {
  padding: 3px !important;
  border-color: var(--oc-ui-border) !important;
  background: var(--oc-ui-panel) !important;
}
body[data-product-version="v02"] #explore .browse-tabs button.active,
body[data-product-version="v02"] #explore .filter-row button.active {
  border-color: var(--oc-ui-border-strong) !important;
  color: var(--oc-ui-text) !important;
  background: var(--oc-ui-control-active) !important;
  box-shadow: none !important;
}
body[data-product-version="v02"] #explore .filter-row button,
body[data-product-version="v02"] #characterGrid .role-tags i {
  border-radius: var(--oc-ui-radius-xs) !important;
}
body[data-product-version="v02"] #characterGrid .role-card {
  border-color: var(--oc-ui-border) !important;
  background: var(--oc-ui-panel) !important;
  box-shadow: none !important;
}
body[data-product-version="v02"] #characterGrid .role-card:hover {
  border-color: var(--oc-ui-border-strong) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22) !important;
  transform: translateY(-2px) !important;
}
body[data-product-version="v02"] .drawer-menu-item.active,
body[data-product-version="v02"] .drawer-menu-item:hover {
  color: #1f1f1f !important;
  background: #ececee !important;
}
body[data-product-version="v02"] .locale-menu-popover,
body[data-product-version="v02"] .account-modal {
  border-radius: var(--oc-ui-radius-lg) !important;
}
body[data-product-version="v02"] .locale-menu-popover button,
body[data-product-version="v02"] .account-close,
body[data-product-version="v02"] .account-mode-switch,
body[data-product-version="v02"] .account-mode-switch button,
body[data-product-version="v02"] .account-oauth-button,
body[data-product-version="v02"] .account-form input,
body[data-product-version="v02"] .account-submit,
body[data-product-version="v02"] .drawer-upgrade-pill {
  border-radius: var(--oc-ui-radius-sm) !important;
}
body[data-product-version="v02"] .account-modal {
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28) !important;
}
body[data-product-version="v02"] .drawer-create-pill,
body[data-product-version="v02"] .drawer-upgrade-pill {
  box-shadow: none !important;
}
body[data-product-version="v02"] #chatView .chat-composer {
  border-color: var(--oc-ui-border-strong) !important;
  background: var(--oc-ui-control) !important;
  box-shadow: none !important;
}
body[data-product-version="v02"] #chatView .chat-composer:focus-within {
  border-color: var(--oc-ui-focus) !important;
  box-shadow: 0 0 0 1px var(--oc-ui-focus) !important;
}
@media (max-width: 860px) {
  body[data-product-version="v02"][data-view="explore"] main {
    width: 100% !important;
    max-width: 100% !important;
  }
  body[data-product-version="v02"] .mobile-top-icon {
    border-radius: var(--oc-ui-radius-md) !important;
  }
  body[data-product-version="v02"] .explore-drawer-panel {
    border-radius: 0 var(--oc-ui-radius-lg) var(--oc-ui-radius-lg) 0 !important;
  }
}
.brand-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  margin: 44px 0 14px;
  padding: 26px 0 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.brand-footer strong {
  display: block;
  color: var(--ink, #fff9f4);
  font-size: 18px;
  letter-spacing: 0.01em;
}

.brand-footer p {
  max-width: 520px;
  margin: 8px 0 0;
  color: var(--muted, rgba(255, 249, 244, 0.68));
  line-height: 1.6;
}

.brand-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px 16px;
  max-width: 460px;
}

.brand-footer a {
  color: var(--muted, rgba(255, 249, 244, 0.68));
  font-size: 13px;
  text-decoration: none;
}

.brand-footer a:hover,
.brand-footer a:focus-visible {
  color: var(--ink, #fff9f4);
}

@media (max-width: 720px) {
  .brand-footer {
    display: grid;
    gap: 18px;
    margin-top: 30px;
    padding: 22px 4px calc(104px + env(safe-area-inset-bottom));
  }

  .brand-footer nav {
    justify-content: flex-start;
  }
}

/* First-chat nickname gate: personalization without an account wall. */
body[data-product-version="v02"] .nickname-backdrop {
  z-index: 1300;
  padding: 20px;
  background: rgba(5, 5, 7, 0.72);
  backdrop-filter: blur(14px);
}

body[data-product-version="v02"] .nickname-modal {
  width: min(440px, 100%);
  max-height: min(720px, calc(100dvh - 40px));
  overflow: auto;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  color: #fff;
  background:
    radial-gradient(circle at 82% 0%, rgba(207, 76, 132, 0.22), transparent 42%),
    #151316;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.52);
}

body[data-product-version="v02"] .nickname-character {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 42px;
}

body[data-product-version="v02"] .nickname-character img {
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  object-fit: cover;
  object-position: var(--image-focus, 50% 30%);
}

body[data-product-version="v02"] .nickname-character span,
body[data-product-version="v02"] .nickname-field {
  display: grid;
  gap: 4px;
}

body[data-product-version="v02"] .nickname-character small {
  color: #dc6b9b;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.15em;
}

body[data-product-version="v02"] .nickname-character strong {
  font-size: 15px;
}

body[data-product-version="v02"] .nickname-modal h2 {
  margin: 24px 0 8px;
  color: #fff;
  font-size: clamp(27px, 5vw, 38px);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

body[data-product-version="v02"] .nickname-modal > p {
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.55;
}

body[data-product-version="v02"] .nickname-field {
  margin-top: 24px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

body[data-product-version="v02"] .nickname-field input {
  width: 100%;
  min-height: 54px;
  margin-top: 5px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  outline: none;
  color: #fff;
  background: rgba(255, 255, 255, 0.065);
  font: inherit;
  font-size: 16px;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

body[data-product-version="v02"] .nickname-field input:focus {
  border-color: rgba(220, 107, 155, 0.85);
  background: rgba(255, 255, 255, 0.085);
  box-shadow: 0 0 0 4px rgba(220, 107, 155, 0.13);
}

body[data-product-version="v02"] .nickname-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 10px;
  margin-top: 18px;
}

body[data-product-version="v02"] .nickname-actions button {
  min-height: 50px;
  margin: 0;
}

body[data-product-version="v02"] .nickname-modal .nickname-privacy {
  margin-top: 15px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 11px;
}

body[data-product-version="v02"] .nickname-status:empty {
  display: none;
}

@media (max-width: 720px) {
  body[data-product-version="v02"] .nickname-backdrop {
    align-items: flex-end;
    padding: 0;
  }

  body[data-product-version="v02"] .nickname-modal {
    width: 100%;
    max-height: min(86dvh, 680px);
    padding: 24px 20px calc(18px + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: 28px 28px 0 0;
  }

  body[data-product-version="v02"] .nickname-modal h2 {
    font-size: 30px;
  }
}

@media (max-width: 380px) {
  body[data-product-version="v02"] .nickname-actions {
    grid-template-columns: 1fr;
  }

  body[data-product-version="v02"] .nickname-actions .primary-action {
    order: -1;
  }
}
