/* V0.31.1 — Clean Modern Refresh */
:root{
  --ol-bg:#0a0913;
  --ol-bg-soft:#110f1b;
  --ol-panel:rgba(20,18,31,.82);
  --ol-panel-strong:rgba(24,21,38,.96);
  --ol-panel-alt:rgba(17,15,28,.90);
  --ol-border:rgba(214,190,255,.12);
  --ol-border-strong:rgba(214,190,255,.20);
  --ol-text:#f5f3fb;
  --ol-muted:#b8b3c8;
  --ol-violet:#a56cff;
  --ol-violet-2:#7d5cff;
  --ol-gold:#f2c98a;
  --ol-shadow:0 14px 50px rgba(0,0,0,.22);
  --ol-shadow-lg:0 28px 80px rgba(0,0,0,.28);
  --ol-radius:24px;
  --ol-radius-sm:16px;
}
html{background:var(--ol-bg)}
body{
  background:
    radial-gradient(circle at top left, rgba(161,105,255,.10), transparent 34%),
    radial-gradient(circle at 88% 10%, rgba(113,88,255,.10), transparent 26%),
    linear-gradient(180deg, #0a0913 0%, #0d0b17 100%);
  color:var(--ol-text);
}
body::before{opacity:.10;background-size:24px 24px}
.wrap{width:min(1180px,calc(100% - 32px))}
.topline{
  height:2px;
  background:linear-gradient(90deg, rgba(165,108,255,.15), rgba(242,201,138,.9), rgba(125,92,255,.25));
}
header{
  background:rgba(10,10,16,.72)!important;
  backdrop-filter:blur(18px) saturate(130%);
  border-bottom:1px solid var(--ol-border)!important;
  box-shadow:0 10px 32px rgba(0,0,0,.16);
}
.nav{height:78px}
.brand{font-size:21px;letter-spacing:-.04em}
.mark{
  width:44px;height:44px;border-radius:14px;
  background:linear-gradient(135deg,#9b6dff,#6e58ff 72%);
  box-shadow:0 10px 28px rgba(134,94,255,.26);
}
.links{gap:22px;color:#cdc7dc;font-size:13px}
.links a{position:relative;color:#cfc9de}
.links a::after{
  content:'';position:absolute;left:0;bottom:-8px;width:100%;height:2px;border-radius:99px;
  background:linear-gradient(90deg,var(--ol-gold),transparent);transform:scaleX(0);transform-origin:left;
  transition:transform .18s ease;
}
.links a:hover::after,.links a:focus-visible::after{transform:scaleX(1)}
.pill,.outline,.previewbtn,.ol-v29-create-btn,.ol-v29-room-card button,.ol-v298-chat-form button{
  border-radius:14px!important;
  font-weight:800!important;
  box-shadow:none!important;
}
.pill,.ol-v29-create-btn,.ol-v29-room-card button,.ol-v298-chat-form button{
  background:linear-gradient(135deg,#9f6bff,#745cff)!important;
  border:1px solid rgba(210,188,255,.18)!important;
}
.outline,.previewbtn{
  background:rgba(255,255,255,.03)!important;
  border:1px solid var(--ol-border)!important;
  color:var(--ol-text)!important;
}
.pill:hover,.outline:hover,.previewbtn:hover,.ol-v29-create-btn:hover,.ol-v29-room-card button:hover,.ol-v298-chat-form button:hover{
  transform:translateY(-1px);
  filter:brightness(1.04);
}
.hero{
  background:
    radial-gradient(circle at 16% 8%, rgba(160,105,255,.10), transparent 28%),
    radial-gradient(circle at 84% 24%, rgba(125,92,255,.12), transparent 22%),
    linear-gradient(180deg, rgba(12,10,20,1) 0%, rgba(10,9,19,1) 100%);
}
.hero::after{height:120px;background:linear-gradient(180deg, transparent, #0d0b16)}
.stars{opacity:.22;filter:blur(.1px)}
.hero-inner{gap:48px;min-height:630px;padding:72px 0 92px}
.eyebrow,.auth-flag,.kicker,.beta-banner .kicker2{
  background:rgba(255,255,255,.03)!important;
  border:1px solid var(--ol-border)!important;
  color:#ece8f7!important;
  letter-spacing:.12em;
}
.live-dot,.signal{box-shadow:0 0 0 4px rgba(87,227,137,.18)}
h1{font-size:clamp(48px,6vw,76px)!important;letter-spacing:-.065em!important;line-height:1.02!important}
.lede, .hero p, section p, .auth-card p, .ol-social p{color:var(--ol-muted)!important}
.lede{font-size:18px!important;max-width:600px!important}
.hero-status{gap:12px;margin-top:22px}
.status-chip,.waitpill,.ol-demo-pill,.ol-v29-beta-pill{
  background:rgba(255,255,255,.035)!important;
  border:1px solid var(--ol-border)!important;
  color:#e9e4f4!important;
}
.showcase .floating,.showcase .floating2{
  background:rgba(18,16,28,.88)!important;
  border:1px solid var(--ol-border)!important;
  backdrop-filter:blur(10px);
  box-shadow:var(--ol-shadow);
}
.phone{
  border:1px solid rgba(255,255,255,.10)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  padding:11px!important;
  box-shadow:var(--ol-shadow-lg)!important;
}
.screen{
  background:linear-gradient(180deg,#141120,#0f0d17)!important;
  border:1px solid rgba(255,255,255,.05);
}
.room-feature,.mini-room,.feature,.manifesto-card,.road-card,.beta-banner,.beta-mini,
.room-card,.auth-card,.auth-box,.ol-social,.ol-social-panel,.ol-global-wrap,
.ol-voice-demo,.ol-vision-side,.ol-v29-create,.ol-v29-discover,.ol-v298-room-chat,
.ol-contacts-dialog,.ol-side-panel,.ol-profile-card,.ol-contact-thread,.ol-top8-card{
  background:linear-gradient(180deg,var(--ol-panel-strong),var(--ol-panel-alt))!important;
  border:1px solid var(--ol-border)!important;
  box-shadow:var(--ol-shadow)!important;
}
.room-feature,.feature,.manifesto-card,.road-card,.beta-banner,.room-card,
.auth-card,.ol-social,.ol-voice-demo,.ol-vision-side,.ol-v29-create,.ol-v29-discover,.ol-v298-room-chat{
  border-radius:var(--ol-radius)!important;
}
.mini-room,.beta-mini,.road-step,.auth-box,.ol-social-panel,.ol-global-wrap,
.ol-contact-thread,.ol-v29-room-card,.ol-v298-chat-line,.ol-voice-live-seat,
.ol-demo-option,.ol-v296-host-actions #olV29Requests,.ol-voice-request-row,
.ol-v298-room-options,.ol-v298-chat-messages,.ol-profile-grid-card,.ol-top8-card{
  border-radius:var(--ol-radius-sm)!important;
}
.room-feature{padding:22px!important}
.room-feature::before{opacity:.03}
.room-feature p,.mini-room small,.beta-mini span,.road-card p,.manifesto-card p{color:var(--ol-muted)!important}
.avatars .avatar{border-color:rgba(255,255,255,.10)!important}
.section,.ol-vision,.auth-section{padding:84px 0!important}
.section.alt{background:linear-gradient(180deg,#0f0d18,#0d0c15)!important}
.section-head{margin-bottom:38px!important}
.section-head .kicker{margin-bottom:10px}
.section-head h2,.auth-card h2,.cta h2,.ol-vision-head h2{font-size:clamp(30px,4vw,52px)!important;letter-spacing:-.05em!important}
.features,.rooms,.beta-grid{gap:20px!important}
.feature{padding:28px!important}
.feature .ico{
  width:52px;height:52px;border-radius:15px!important;
  background:linear-gradient(135deg,rgba(165,108,255,.22),rgba(125,92,255,.14))!important;
  border:1px solid rgba(255,255,255,.05);
}
.feature h3,.room-body h3,.manifesto-card h3,.road-card h3{letter-spacing:-.03em}
.feature p,.room-body p{font-size:14px!important}
.manifesto,.ol-vision-layout,.ol-social-grid{gap:20px!important}
.road-step{
  background:rgba(255,255,255,.02)!important;
  border:1px solid rgba(255,255,255,.06)!important;
}
.road-step i,.ol-demo-icon,.room-emoji,.ol-v29-room-icon{
  background:linear-gradient(135deg,rgba(165,108,255,.24),rgba(125,92,255,.16))!important;
  border:1px solid rgba(255,255,255,.06);
}
.quote-line{border-top:1px solid rgba(255,255,255,.06)!important;color:#ebe6f4!important}
.room-card{overflow:hidden}
.room-card .room-art{
  height:164px!important;
  background:linear-gradient(180deg,rgba(158,111,255,.16),rgba(255,255,255,0))!important;
}
.room-card:nth-child(2) .room-art{background:linear-gradient(180deg,rgba(242,201,138,.18),rgba(255,255,255,0))!important}
.room-card:nth-child(3) .room-art{background:linear-gradient(180deg,rgba(125,92,255,.18),rgba(255,255,255,0))!important}
.room-body{padding:22px!important}
.room-meta{padding-top:14px;border-top:1px solid rgba(255,255,255,.06)}
.cta{
  background:
    radial-gradient(circle at 50% 0%, rgba(162,108,255,.14), transparent 34%),
    linear-gradient(180deg,#11101a,#0d0b16)!important;
  border-top:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.notify input,.signup-card input,.signup-card textarea,
.ol-social-panel textarea,.ol-social-panel input,
.ol-v29-create-form input,.ol-v29-create-form select,
.ol-v298-room-options select,.ol-v298-chat-form input,.ol-contact-compose textarea,
.ol-contact-search,.ol-profile-form input,.ol-profile-form textarea,.ol-profile-form select{
  background:rgba(255,255,255,.035)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  color:var(--ol-text)!important;
  border-radius:14px!important;
}
.notify input::placeholder,.ol-v29-create-form input::placeholder,.ol-v298-chat-form input::placeholder{color:#938ca5}
.notify input:focus,.signup-card input:focus,.signup-card textarea:focus,
.ol-social-panel textarea:focus,.ol-social-panel input:focus,
.ol-v29-create-form input:focus,.ol-v29-create-form select:focus,
.ol-v298-room-options select:focus,.ol-v298-chat-form input:focus,.ol-contact-compose textarea:focus,
.ol-profile-form input:focus,.ol-profile-form textarea:focus,.ol-profile-form select:focus{
  outline:2px solid rgba(242,201,138,.55)!important;
  outline-offset:1px;
  border-color:rgba(242,201,138,.32)!important;
}
footer{border-top:1px solid rgba(255,255,255,.05)!important;background:#0c0b14}
.foot small,.note,.micro,.auth-note{color:#9892a7!important}
/* Auth/login cleanup */
.auth-card{text-align:center}
#googleSignIn,
#googleSignIn button,
#googleSignIn div{
  max-width:100%!important;
}
/* Social + contacts */
.ol-global-wrap{background:linear-gradient(180deg,var(--ol-panel-strong),var(--ol-panel-alt))!important;border:1px solid var(--ol-border)!important}
.ol-global-top,.ol-contacts-top{background:rgba(255,255,255,.03)!important;border-bottom:1px solid rgba(255,255,255,.06)!important}
.ol-post,.ol-notice,.ol-friend-row,.ol-top8-tile,.ol-dm-msg.theirs,.ol-inbox-item{
  background:rgba(255,255,255,.03)!important;
  border:1px solid rgba(255,255,255,.06)!important;
}
.ol-dm-msg.mine{background:linear-gradient(135deg,rgba(159,107,255,.52),rgba(116,92,255,.45))!important}
/* Demo/live voice rooms */
.ol-voice-live-head,.ol-vision-head{align-items:flex-end}
.ol-voice-live-badge{background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:999px;padding:10px 14px}
.ol-v29-room-list{gap:12px!important}
.ol-v29-room-card{padding:14px!important;background:rgba(255,255,255,.025)!important;border:1px solid rgba(255,255,255,.08)!important}
.ol-v29-room-desc small,.ol-v29-empty,.ol-voice-live-status,.ol-v29-note,.ol-v298-chat-status{color:var(--ol-muted)!important}
.ol-voice-live-seat,.ol-demo-option,.ol-voice-request-row,.ol-v298-chat-line,.ol-v298-room-options,
.ol-v296-host-actions #olV29Requests{
  background:rgba(255,255,255,.03)!important;
  border:1px solid rgba(255,255,255,.08)!important;
}
.ol-demo-option.selected,
.ol-voice-live-seat.ol-v29-seat-tap:hover{
  border-color:rgba(242,201,138,.28)!important;
  background:rgba(242,201,138,.06)!important;
  box-shadow:0 0 0 1px rgba(242,201,138,.10) inset;
}
.ol-voice-live-seat{box-shadow:none!important}
.ol-v298-chat-messages{background:rgba(255,255,255,.02)!important;border:1px solid rgba(255,255,255,.08)!important}
.ol-v298-chat-delete,.ol-contacts-close,.ol-inbox-trigger,.ol-v29-refresh,.ol-v29-move-btn{
  background:rgba(255,255,255,.04)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  color:#efeaf8!important;
  border-radius:12px!important;
}
.ol-v298-chat-delete:hover,.ol-contacts-close:hover,.ol-inbox-trigger:hover,.ol-v29-refresh:hover,.ol-v29-move-btn:hover{background:rgba(255,255,255,.07)!important}
/* Admin shield */
.ol-v306-admin-toggle{
  background:rgba(255,255,255,.06)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  color:#f4ebff!important;
  backdrop-filter:blur(8px);
}
.ol-v306-admin-toggle:hover:not(:disabled){background:rgba(255,255,255,.10)!important;border-color:rgba(242,201,138,.34)!important}
/* Smaller clean mobile adjustments */
@media(max-width:980px){
  .hero-inner{grid-template-columns:1fr;gap:30px;min-height:0}
  .showcase{order:-1;max-width:460px;margin:0 auto}
  .manifesto,.ol-vision-layout,.ol-social-grid,.ol-v29-lobby{grid-template-columns:1fr!important}
}
@media(max-width:760px){
  .section,.ol-vision,.auth-section{padding:64px 0!important}
  .nav{height:68px}
  .links{display:none}
  .hero-inner{padding:38px 0 70px}
  .actions{gap:10px}
  .pill,.outline{width:100%;justify-content:center}
  .features,.rooms,.beta-grid{grid-template-columns:1fr!important}
}
@media(max-width:520px){
  .wrap{width:min(100% - 20px,1180px)}
  h1{font-size:clamp(40px,13vw,56px)!important}
  .status-chip{width:100%;justify-content:flex-start}
  .phone{width:min(100%,340px)}
  .showcase .floating,.showcase .floating2{display:none}
  .auth-card,.ol-social,.ol-v29-create,.ol-v29-discover,.ol-v298-room-chat,.manifesto-card,.road-card,.room-card,.feature,.ol-voice-demo,.ol-vision-side{padding:18px!important}
}