/* QRSocial R87 Run 10 — Premium visual continuity.
   Presentation only. Preserve native click hooks, user data, call/video signaling,
   responsive five-destination dock and existing routing. */
:root{
  --q10-blue:#3478ff;--q10-violet:#6654fa;--q10-ink:#182239;
  --q10-glow:rgba(82,105,255,.10);--q10-edge:rgba(95,113,168,.17);
  --q10-surface:#ffffff;--q10-muted:#67738a;--q10-canvas:#f6f8ff;
  --q10-shadow:0 10px 28px rgba(42,57,103,.075),0 1px 2px rgba(42,57,103,.035);
  --q10-cta:linear-gradient(120deg,#347bff 0%,#5267ff 50%,#7850f6 100%);
}
html[data-theme="dark"]{
  --q10-ink:#f1f4ff;--q10-glow:rgba(100,112,255,.18);
  --q10-edge:rgba(164,176,235,.20);--q10-surface:#1a1f2d;
  --q10-muted:#a7b1c9;--q10-canvas:#121724;
  --q10-shadow:0 12px 34px rgba(0,0,0,.24);
}
/* QR quick action: draw the icon from embedded CSS, eliminating asset dependency.
   Keep the original clickable button and inline SVG markup for semantics. */
.qs-network-header .qs-network-actions .qs-my-qr-button{
  box-sizing:border-box;display:inline-flex!important;align-items:center!important;
  justify-content:center!important;min-width:43px!important;width:43px!important;
  min-height:43px!important;height:43px!important;flex:0 0 43px;
  border:1px solid rgba(84,125,248,.36)!important;border-radius:14px!important;
  color:var(--q10-blue)!important;background:linear-gradient(140deg,rgba(74,135,255,.15),rgba(110,88,251,.08))!important;
  box-shadow:0 5px 15px rgba(51,102,220,.10),inset 0 1px 0 rgba(255,255,255,.38);
  opacity:1!important;visibility:visible!important;cursor:pointer;
}
.qs-network-header .qs-network-actions .qs-my-qr-button svg{display:none!important}
.qs-network-header .qs-network-actions .qs-my-qr-button:before{
  content:"";display:block!important;position:relative;width:23px;height:23px;flex:0 0 23px;
  background:currentColor;
  -webkit-mask:url('/assets/icons/qrsocial-qr-r10.svg') center/contain no-repeat;
  mask:url('/assets/icons/qrsocial-qr-r10.svg') center/contain no-repeat;
}
.qs-network-header .qs-network-actions .qs-my-qr-button:is(:hover,:focus-visible){
  border-color:rgba(85,101,248,.64)!important;box-shadow:0 0 0 3px rgba(83,110,255,.12),0 8px 22px rgba(53,92,203,.16);
}
/* Visible fallback initial for broken mobile Profile avatar URLs. */
.qs-r59-mobile-nav :is(.qs-r88-mobile-avatar-img,.qs-r88-mobile-avatar-fallback)[hidden],
.qs-inbox :is(.qs-r88-avatar-img,.qs-r88-avatar-fallback)[hidden]{display:none!important}
.qs-r59-mobile-nav .qs-r88-mobile-avatar-fallback{
  width:30px!important;height:30px!important;min-width:30px;
  border-radius:50%!important;display:grid;place-items:center;
  font-size:12px;font-weight:850;color:#5368e6!important;
  border:1px solid rgba(101,119,232,.25);background:#eaeaff!important;
}
.qs-r59-mobile-nav .qs-r88-mobile-avatar-img{object-fit:cover;border-radius:50%!important}
/* Restore consistent premium primary and secondary controls on screenshot pages. */
.qs-r65-studio-page :is(.qs-r65-studio-hero>button,.qs-r65-performance-head>button,.qs-r65-empty-studio>button),
.qs-r68-rooms-shell :is(.qs-r68-start-room,.qs-r68-room-empty>button),
.qs-r68-create-room .qs-r68-create-go{
  appearance:none!important;-webkit-appearance:none!important;
  display:inline-flex!important;justify-content:center!important;align-items:center!important;
  gap:8px;box-sizing:border-box;min-height:45px!important;width:auto;
  padding:11px 19px!important;margin:0;
  border:1px solid rgba(255,255,255,.22)!important;border-radius:15px!important;
  background:var(--q10-cta)!important;background-color:#416cff!important;
  color:#fff!important;font-family:inherit;font-size:13px!important;
  font-weight:800!important;line-height:1.2!important;letter-spacing:-.01em;
  text-decoration:none!important;text-align:center;white-space:normal;
  box-shadow:0 8px 22px rgba(75,99,231,.22),inset 0 1px 0 rgba(255,255,255,.25)!important;
  cursor:pointer;transition:filter .16s ease,transform .16s ease,box-shadow .16s ease;
}
.qs-r68-rooms-shell .qs-r73-room-hero-actions>a,
.qs-r65-studio-page .qs-r65-performance-head>a{
  box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;
  min-height:41px;max-width:100%;padding:9px 15px!important;
  border:1px solid var(--q10-edge)!important;border-radius:14px!important;
  background:linear-gradient(145deg,var(--q10-surface),color-mix(in srgb,var(--q10-blue) 5%,var(--q10-surface)))!important;
  color:var(--q10-blue)!important;text-decoration:none!important;
  font-size:12px!important;font-weight:800!important;white-space:nowrap;
  box-shadow:0 3px 11px rgba(44,62,113,.055)!important;
}
.qs-r68-rooms-shell .qs-r73-room-hero-actions>a:is(:hover,:focus-visible),
.qs-r65-studio-page .qs-r65-performance-head>a:is(:hover,:focus-visible){border-color:rgba(83,112,248,.55)!important}
.qs-r65-studio-page :is(button,a):focus-visible,
.qs-r68-rooms-shell :is(button,a):focus-visible{
  outline:3px solid rgba(92,108,255,.50)!important;outline-offset:3px!important;
}
@media(hover:hover){
  .qs-r65-studio-page :is(.qs-r65-performance-head>button,.qs-r65-empty-studio>button):hover,
  .qs-r68-rooms-shell :is(.qs-r68-start-room,.qs-r68-room-empty>button):hover{filter:brightness(1.06);transform:translateY(-1px)}
}
/* Creator Studio: readable cards, accent gradients and a sane mobile content gutter. */
.qs-r65-studio-page{box-sizing:border-box;max-width:1120px;min-width:0}
.qs-r65-studio-page .qs-r65-studio-metrics{grid-template-columns:repeat(6,minmax(0,1fr))}
.qs-r65-studio-page .qs-r65-performance,
.qs-r65-studio-page .qs-r70-creator-engine,
.qs-r65-studio-page .qs-r72-creator-viral,
.qs-r65-studio-page .qs-r74-studio-economy{
  box-sizing:border-box;min-width:0;max-width:100%;
  border:1px solid var(--q10-edge)!important;border-radius:24px!important;
  background:var(--q10-surface)!important;box-shadow:var(--q10-shadow)!important;
  margin:14px 0!important;padding:clamp(16px,2.6vw,25px)!important;
}
.qs-r65-studio-page .qs-r65-performance-head{display:flex;align-items:center!important;gap:12px;flex-wrap:wrap;margin:0 0 17px}
.qs-r65-studio-page .qs-r65-performance-head>div{min-width:0;flex:1 1 180px}
.qs-r65-studio-page .qs-r65-performance-head span{font-size:10px!important;letter-spacing:.13em!important;color:var(--q10-violet)!important}
.qs-r65-studio-page .qs-r65-performance-head h2{font-size:clamp(20px,2.7vw,27px)!important;line-height:1.16;margin:5px 0 0!important;letter-spacing:-.03em}
.qs-r65-studio-page .qs-r70-template-cards{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:11px!important}
.qs-r65-studio-page .qs-r70-template-card{
  box-sizing:border-box;display:flex!important;flex-direction:column;justify-content:center;align-items:flex-start;
  min-width:0;width:100%;min-height:112px!important;margin:0!important;padding:17px 18px!important;
  background:linear-gradient(148deg,var(--q10-surface),color-mix(in srgb,var(--q10-violet) 4%,var(--q10-surface)))!important;
  border:1px solid var(--q10-edge)!important;border-radius:19px!important;
  color:var(--q10-ink)!important;box-shadow:0 3px 11px rgba(52,69,105,.04)!important;
  text-align:left!important;text-decoration:none;cursor:pointer;
  transition:box-shadow .16s ease,border-color .16s ease,transform .16s ease;
}
.qs-r65-studio-page .qs-r70-template-card strong{display:block;font-size:14px!important;font-weight:800;color:var(--q10-blue)!important;line-height:1.35}
.qs-r65-studio-page .qs-r70-template-card small{display:block;margin-top:7px;font-size:12px!important;color:var(--q10-muted)!important;line-height:1.45;text-align:left!important}
.qs-r65-studio-page .qs-r65-empty-studio{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:205px;padding:26px 16px 45px!important;gap:6px}
.qs-r65-studio-page .qs-r65-empty-studio strong{font-size:20px}
.qs-r65-studio-page .qs-r65-empty-studio p{font-size:13px!important;margin:1px 0 13px;color:var(--q10-muted)!important}
@media(hover:hover){.qs-r65-studio-page .qs-r70-template-card:hover{border-color:rgba(90,116,255,.48)!important;box-shadow:0 11px 25px rgba(60,80,154,.1)!important;transform:translateY(-2px)}}
/* Rooms: compact no-rooms state; both CTAs adopt premium shapes. */
.qs-r68-rooms-shell{box-sizing:border-box;width:min(1180px,100%);min-width:0}
.qs-r68-rooms-hero{align-items:center;gap:20px}
.qs-r68-rooms-hero h1{background:linear-gradient(105deg,#2f7ef9,#6656f7);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.qs-r68-rooms-shell .qs-r68-room-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,285px),1fr))}
.qs-r68-rooms-shell .qs-r68-room-empty{
  box-sizing:border-box;min-height:235px!important;max-width:100%;padding:24px 20px!important;
  border:1px solid var(--q10-edge)!important;border-radius:25px!important;
  background:radial-gradient(circle at 50% 12%,var(--q10-glow),transparent 59%),var(--q10-surface)!important;
  box-shadow:var(--q10-shadow)!important;
}
.qs-r68-rooms-shell .qs-r68-room-empty>span{font-size:34px!important;line-height:1.2;color:var(--q10-violet)}
.qs-r68-rooms-shell .qs-r68-room-empty h2{font-size:clamp(20px,3vw,27px)!important;line-height:1.2;margin:10px 0 4px!important}
.qs-r68-rooms-shell .qs-r68-room-empty p{font-size:14px;line-height:1.5;color:var(--q10-muted);margin:4px 0 18px}
.qs-r68-create-room .qs-r68-create-go{width:100%!important;margin-top:12px!important}
/* Messenger: calm brand glow, expressive selection, denser readable rows. */
.qs-inbox.qs-r2-inbox-shell{
  --q10-row:var(--q10-surface);
  box-sizing:border-box!important;min-width:0!important;
  background:radial-gradient(ellipse at 96% 3%,rgba(92,88,254,.085),transparent 45%),radial-gradient(ellipse at 2% 12%,rgba(38,131,255,.055),transparent 38%);
  border-radius:28px;padding-bottom:145px!important;
}
.qs-r2-inbox-shell .qs-r2-inbox-primary{min-width:0;box-sizing:border-box}
.qs-r2-inbox-shell .qs-r1-eyebrow{color:var(--q10-blue)!important;font-weight:850}
.qs-r2-inbox-shell .qs-r1-heading h1{font-size:clamp(28px,4vw,39px)!important;color:var(--q10-ink)!important;letter-spacing:-.045em!important}
.qs-r2-inbox-shell .qs-r1-heading p{font-size:13px!important;color:var(--q10-muted)!important;line-height:1.5}
.qs-r2-inbox-shell .qs-r1-new-message{
  border:1px solid rgba(255,255,255,.21)!important;border-radius:17px!important;
  background:var(--q10-cta)!important;color:#fff!important;
  box-shadow:0 9px 21px rgba(70,93,228,.24)!important;font-weight:800!important;
}
.qs-r2-inbox-shell .qs-r26-inbox-search{
  border:1px solid var(--q10-edge)!important;border-radius:17px!important;
  background:var(--q10-surface)!important;box-shadow:0 5px 17px rgba(51,68,109,.05)!important;
}
.qs-r2-inbox-shell .qs-r26-inbox-search:focus-within{border-color:rgba(89,110,255,.63)!important;box-shadow:0 0 0 3px rgba(94,105,247,.11)!important}
.qs-r2-inbox-shell .qs-r58-inbox-tabs{box-sizing:border-box;max-width:100%;padding:5px!important;border:1px solid var(--q10-edge)!important;background:color-mix(in srgb,var(--q10-blue) 5%,var(--q10-surface))!important;border-radius:17px!important;box-shadow:none!important}
.qs-r2-inbox-shell .qs-r58-inbox-tabs>a{
  box-sizing:border-box;display:inline-flex!important;align-items:center;justify-content:center;
  min-width:0;min-height:42px!important;padding:8px 6px!important;border-radius:12px!important;
  font-size:12px;font-weight:750;white-space:nowrap;
  color:var(--q10-muted)!important;background:transparent!important;text-align:center;
}
.qs-r2-inbox-shell .qs-r58-inbox-tabs>a.is-active{
  color:var(--q10-violet)!important;background:var(--q10-surface)!important;
  box-shadow:0 2px 8px rgba(57,72,120,.10),inset 0 -2px 0 rgba(98,87,255,.4)!important;
}
.qs-r2-inbox-shell .qs-r1-conversations-head{margin:17px 2px 13px!important}
.qs-r2-inbox-shell .qs-r1-conversations-head h2{color:var(--q10-ink)!important;font-size:18px!important}
.qs-r2-inbox-shell .qs-r1-live-state{color:var(--q10-muted)!important;font-size:11px!important}
.qs-r2-inbox-shell [data-r26-conversation-list]{display:block;min-width:0}
.qs-r2-inbox-shell .qs-r1-thread-row{
  box-sizing:border-box;position:relative;display:flex!important;align-items:center!important;
  gap:11px!important;min-height:82px!important;margin:0 0 9px!important;
  padding:13px 14px!important;border:1px solid var(--q10-edge)!important;
  border-radius:19px!important;background:var(--q10-row)!important;
  box-shadow:var(--q10-shadow)!important;
  transition:box-shadow .16s ease,border-color .16s ease,background .16s ease!important;
}
.qs-r2-inbox-shell .qs-r1-thread-row.qs-thread-unread{
  border-color:rgba(94,111,255,.44)!important;
  background:linear-gradient(116deg,color-mix(in srgb,var(--q10-blue) 9%,var(--q10-surface)),var(--q10-surface) 70%)!important;
  box-shadow:inset 3px 0 0 var(--q10-violet),var(--q10-shadow)!important;
}
.qs-r2-inbox-shell .qs-r1-thread-row .qs-r1-avatar{
  box-sizing:border-box!important;width:49px!important;height:49px!important;min-width:49px!important;
  border:1px solid rgba(85,108,180,.20)!important;border-radius:50%!important;
  background:linear-gradient(145deg,#212f44,#111a2b)!important;color:#47dbad!important;
  display:grid;place-items:center;font-size:20px!important;font-weight:780!important;object-fit:cover;
}
.qs-r2-inbox-shell .qs-r1-thread-row [data-r58-thread-name]{font-size:14px!important;font-weight:850!important;color:var(--q10-ink)!important}
.qs-r2-inbox-shell .qs-r1-thread-row [data-r58-thread-preview]{font-size:12.5px!important;line-height:1.42!important;color:var(--q10-muted)!important}
.qs-r2-inbox-shell .qs-r1-thread-row [data-r58-thread-time]{font-size:10.5px!important;color:var(--q10-muted)!important}
.qs-r2-inbox-shell .qs-r1-thread-row .badge{font-size:9px!important;font-weight:750;line-height:1.2!important;padding:4px 9px!important}
.qs-r2-inbox-shell .qs-r1-thread-row [data-r58-thread-meta]{margin-top:5px!important;gap:5px!important}
.qs-r2-inbox-shell .qs-r1-thread-row .qs-r26-favorite-star{color:var(--q10-violet)!important}
.qs-r2-inbox-shell .qs-r1-extras{box-shadow:var(--q10-shadow)}
@media(hover:hover){.qs-r2-inbox-shell .qs-r1-thread-row:hover{border-color:rgba(94,111,255,.43)!important;box-shadow:0 12px 25px rgba(41,68,139,.12)!important;transform:translateY(-1px)}}
/* Mobile: no page-wide overflow, inset contents from edges, clear persistent dock. */
@media(max-width:760px){
  body.has-tabbar .qs-r65-studio-page{
    box-sizing:border-box!important;width:100%!important;max-width:100%!important;
    margin:10px auto 0!important;padding:0 14px calc(150px + env(safe-area-inset-bottom))!important;
    overflow-x:clip;
  }
  .qs-r65-studio-page .qs-r65-studio-hero{border-radius:22px!important;padding:20px!important;min-height:0!important;gap:10px;flex-wrap:wrap}
  .qs-r65-studio-page .qs-r65-studio-hero h1{font-size:27px!important;line-height:1.15}
  .qs-r65-studio-page .qs-r65-studio-metrics{
    grid-template-columns:repeat(6,minmax(103px,1fr))!important;overflow-x:auto;
    overscroll-behavior-x:contain;margin:14px 0!important;padding:2px 2px 12px!important;
  }
  .qs-r65-studio-page .qs-r65-performance,
  .qs-r65-studio-page .qs-r70-creator-engine,
  .qs-r65-studio-page .qs-r72-creator-viral,
  .qs-r65-studio-page .qs-r74-studio-economy{
    border-radius:22px!important;border:1px solid var(--q10-edge)!important;
    margin:11px 0!important;padding:17px!important;
  }
  .qs-r65-studio-page .qs-r65-performance-head h2{font-size:21px!important}
  .qs-r65-studio-page .qs-r70-template-card{min-height:109px!important;padding:14px!important}
  .qs-r65-studio-page .qs-r70-template-card strong{font-size:12.5px!important}
  .qs-r65-studio-page .qs-r70-template-card small{font-size:11px!important}
  .qs-r65-studio-page .qs-r65-empty-studio{min-height:200px;padding-bottom:42px!important}
  .qs-r68-rooms-shell{width:100%!important;max-width:100%!important;padding:22px 15px calc(140px + env(safe-area-inset-bottom))!important}
  .qs-r68-rooms-shell .qs-r68-rooms-hero{align-items:stretch!important;gap:17px!important;margin-bottom:18px}
  .qs-r68-rooms-shell .qs-r68-rooms-hero h1{font-size:clamp(39px,11vw,57px)!important}
  .qs-r68-rooms-shell .qs-r68-rooms-hero p{font-size:14px;line-height:1.5}
  .qs-r68-rooms-shell .qs-r73-room-hero-actions{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px!important}
  .qs-r68-rooms-shell .qs-r73-room-hero-actions>*{min-width:0;width:100%!important;min-height:46px!important;padding:10px 12px!important;font-size:12px!important;text-align:center}
  .qs-r68-rooms-shell .qs-r68-room-empty{min-height:218px!important;padding:24px 14px!important}
  .qs-r68-rooms-shell .qs-r68-room-empty h2{font-size:23px!important}
  .qs-inbox.qs-r2-inbox-shell{
    width:100%!important;max-width:100%!important;min-width:0!important;
    border-radius:0!important;padding:18px 14px calc(145px + env(safe-area-inset-bottom))!important;
    margin:0!important;overflow-x:clip;
  }
  .qs-r2-inbox-shell .qs-r1-heading h1{font-size:31px!important}
  .qs-r2-inbox-shell .qs-r1-new-message{min-height:44px!important;padding:8px 12px!important;font-size:11px!important}
  .qs-r2-inbox-shell .qs-r1-head{gap:10px!important;margin-bottom:16px!important}
  .qs-r2-inbox-shell .qs-r58-inbox-tabs{width:100%!important;gap:3px!important}
  .qs-r2-inbox-shell .qs-r58-inbox-tabs>a{font-size:11px!important;min-height:41px!important}
  .qs-r2-inbox-shell .qs-r1-thread-row{min-height:82px!important;padding:12px 12px!important;gap:10px!important}
  .qs-r2-inbox-shell .qs-r1-thread-row [data-r58-thread-name]{font-size:14px!important}
  .qs-r2-inbox-shell .qs-r1-thread-row [data-r58-thread-preview]{font-size:12px!important}
  .qs-r2-inbox-shell .qs-r1-conversations-head h2{font-size:17px!important}
  body.has-tabbar .qs-r59-mobile-nav{box-shadow:0 9px 34px rgba(40,59,110,.12)!important}
}
@media(max-width:390px){
  .qs-r65-studio-page .qs-r70-template-cards{grid-template-columns:1fr!important}
  .qs-r65-studio-page .qs-r70-template-card{min-height:84px!important}
  .qs-r2-inbox-shell .qs-r1-heading p{display:none}
  .qs-r2-inbox-shell .qs-r1-new-message{padding:8px 10px!important;font-size:10px!important}
  .qs-r2-inbox-shell .qs-r1-live-state{font-size:0!important}
  .qs-r68-rooms-shell .qs-r73-room-hero-actions>a{font-size:11px!important}
}
@media(prefers-reduced-motion:reduce){
  .qs-r65-studio-page .qs-r70-template-card,
  .qs-r2-inbox-shell .qs-r1-thread-row,
  .qs-r65-studio-page button,.qs-r68-rooms-shell button{transition:none!important;transform:none!important}
}
