:root {
  color-scheme:light;
  --green:#087eaf;
  --strong:#075984;
  --mint:#cceeff;
  --pale:#e8f7ff;
  --surface:#f3fbff;
  --page:#b7e7ff;
  --rail:#d3f0ff;
  --canvas:#dbf4ff;
  --line:#a9d9ef;
  --ink:#123453;
  --muted:#385c78;
  --quiet:#436b86;
  --bubble:#bde9ff;
  --danger:#a62743;
  --focus:#0877a7;
  --gold:#ffd57a;
  --gold-ink:#422c08;
  --sky:#78ceff;
  --ice:#eefaff;
  --header-edge:#74bde6;
  --control:#edfaff;
  --raised-shadow:#277db622;
  --electric:#007fdc;
  --cyan:#5ce7ff;
  --wallpaper-top:#eefaffee;
  --wallpaper-bottom:#c1eaffab;
}
:root.dark {
  color-scheme:dark;
  --green:#59c8ff;
  --strong:#a4e2ff;
  --mint:#193e61;
  --pale:#15304c;
  --surface:#10263d;
  --page:#0b1d32;
  --rail:#10263d;
  --canvas:#10283f;
  --line:#325976;
  --ink:#eff8ff;
  --muted:#bad1e7;
  --quiet:#a4bed8;
  --bubble:#1c4a70;
  --danger:#ff9d9d;
  --focus:#82d5ff;
  --sky:#1a537e;
  --ice:#14324d;
  --header-edge:#396987;
  --control:#102a43;
  --raised-shadow:#020e1d55;
  --electric:#48c7ff;
  --wallpaper-top:#122f4cee;
  --wallpaper-bottom:#0b2237b5;
}
html { min-height:100%; background:var(--page) }
body {
  width:100%;
  height:100vh;
  height:100dvh;
  min-height:100%;
  margin:0;
  background:var(--page);
}
.workspace,.portal-root { flex:1 1 0; min-width:0; min-height:0 }
.topbar,.dark .topbar {
  background:
    radial-gradient(ellipse at 58% 0%,#1297e9a6,transparent 58%),
    linear-gradient(108deg,#073979,#075db1 53%,#084586);
  color:#f0fbff;
  border-bottom:1px solid #66defb;
  box-shadow:0 2px 10px #007ce044,inset 0 -1px #b4f5ff40;
  z-index:2;
}
.brand { min-width:0; gap:10px; font-size:19px; white-space:nowrap }
.brand-image { width:176px; height:54px; object-fit:contain; object-position:left center; display:block; flex:none }
.brand-image-icon { width:42px; height:42px }
#portal-wordmark { color:#f0fbff; font-size:18px; font-weight:800 }
.portal-title { border-color:#8be3ff66; color:#e0f7ff }
.topbar .connection,.dark .topbar .connection,.topbar .account > svg,.dark .topbar .account > svg { color:#e0f7ff }
.topbar .connection.connected i { background:var(--cyan); box-shadow:0 0 8px #69edffa0 }
.presence.online { background:#087ca8 }
.topbar .global-search,.dark .topbar .global-search,
.topbar .language-select,.portal-page select.language-select,.dark .language-select {
  color:var(--ink); background:var(--control); border-color:var(--header-edge);
}
.topbar kbd,.dark .topbar kbd { background:var(--mint); color:var(--strong); border-color:var(--line) }
.rail,.dark .rail { background:linear-gradient(180deg,var(--rail),var(--surface)) }
.rail-item.active,.icon-button.selected,.filter.active,.ops-nav .selected,.staff-tabs button.selected {
  color:var(--strong);
  background:linear-gradient(130deg,var(--ice),var(--mint));
  box-shadow:inset 0 0 0 1px #29b6ee50,inset 0 1px #e1faff70;
}
.conversation.active,.dark .conversation.active {
  background:linear-gradient(105deg,var(--mint),var(--pale));
  box-shadow:inset 0 0 0 1px #29b6ee4d;
}
.conversation.active::before { background:var(--electric); box-shadow:0 0 8px #23b7fbaa }
.details,.staff-side { background:linear-gradient(180deg,var(--pale),var(--surface) 65%) }
.chat,.staff-chat { background-color:var(--canvas) }
.brand-wallpaper {
  background:linear-gradient(165deg,var(--wallpaper-top) 8%,var(--wallpaper-bottom)),
    url('/brand/blue-orbit.webp') center bottom / cover no-repeat var(--canvas);
}
.chat .thread,.staff-messages { background-image:radial-gradient(#168ac518 1px,transparent 1px); background-size:21px 21px }
.chat-wallpaper.photo-wallpaper,.portal-page .chat-wallpaper.photo-wallpaper { opacity:.24 }
.chat .compose-area { background:linear-gradient(0deg,var(--canvas) 55%,transparent) }
.composer:focus-within {
  border-color:var(--electric);
  box-shadow:0 0 0 2px #4ce2ff38,0 3px 12px #007fdc18;
}
.bubble { background:var(--surface); border-color:var(--line) }
.msg.mine .bubble,.dark .msg.mine .bubble { background:var(--bubble); border-color:var(--header-edge) }
.date-divider { color:var(--quiet) }
.avatar .presence { border-color:var(--surface) }
.primary,.icon-button.add {
  background:linear-gradient(180deg,#fff2b9 0%,#ffd96d 48%,#f1ac36 100%);
  color:var(--gold-ink);
  box-shadow:inset 0 1px #fff9d8,inset 0 0 0 1px #bf86134d,0 3px 9px #95621934;
}
.primary:hover,.icon-button.add:hover { background:#ffdf95; color:var(--gold-ink) }
.unread { color:#fff; background:#0877a7 }
input[type=checkbox],input[type=radio] { accent-color:#087eaf }
.reaction.selected { border-color:var(--header-edge); color:var(--strong) }
.batch-check { border-color:var(--header-edge) }
.batch-check.selected { background:#0978a9; border-color:#0978a9 }
.portal-page,.portal-root { background:var(--page) }
.ops-shell {
  min-height:100%;
  background:linear-gradient(140deg,var(--wallpaper-top) 12%,var(--wallpaper-bottom)),
    url('/brand/blue-orbit.webp') center bottom / cover no-repeat var(--page);
}
.ops-hero {
  color:#f2fcff; border-color:#63d5fa;
  background:linear-gradient(103deg,#083a78f8 2%,#085fb9d9 58%,#0b5ba491),
    url('/brand/blue-orbit.webp') center 72% / cover no-repeat #0b62ad;
  overflow:hidden;
  box-shadow:inset 0 1px #bcf5ff8a,0 4px 16px #008edf3b;
}
.ops-hero::before { background:linear-gradient(105deg,transparent 74%,#89f1ff85 74.2%,transparent 75%,transparent 82%,#ffd36882 82.2%,transparent 83%) }
.ops-hero p { color:#def4ff }
.ops-stat,.ops-card { box-shadow:0 5px 20px var(--raised-shadow) }
.ops-stat b { color:var(--strong) }
.status-pill { background:var(--mint); color:var(--strong) }
.status-pill.waiting { background:#fff2cb; color:#68470a }
.status-pill.closed { background:var(--pale); color:var(--muted) }
.portal-root:has(.portal-auth) {
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(min-content,1fr);
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(ellipse at 50% 38%,#ddfaff76,transparent 57%),
    radial-gradient(ellipse at 82% 49%,#25b7ff70,transparent 33%),
    radial-gradient(ellipse at 19% 69%,#41f2ff66,transparent 32%),
    url('/brand/auth-layers.svg') center / cover no-repeat,
    url('/brand/blue-orbit.webp') center / cover no-repeat,
    linear-gradient(135deg,var(--page) 4%,var(--sky) 100%);
}
.portal-auth,
#dialog:has([data-form="login"],[data-form="register"],[data-form="verify"]) {
  --auth-gutter:clamp(17px,4vw,30px);
  --ink:#133555;
  --muted:#395e7c;
  --strong:#075f90;
  --line:#90c9ea;
  --canvas:#f4fbff;
  color:var(--ink);
  color-scheme:light;
  border:1px solid #78ecff;
  background:linear-gradient(140deg,#f7fdff 1%,#e5f5fff9 67%,#d5edff);
  box-shadow:inset 0 1px #fff,0 0 0 3px #2abcf748,0 0 29px #22d8ff91,0 20px 52px #03336667;
}
.portal-auth { position:relative; z-index:1; width:min(100%,444px) }
.portal-auth .auth-box { padding:0 var(--auth-gutter) clamp(19px,4vw,29px); gap:14px }
.portal-auth .auth-heading,
#dialog:has([data-form="login"],[data-form="register"],[data-form="verify"]) .dialog-head {
  color:#f2fbff;
  background:
    linear-gradient(116deg,transparent 70%,#5bdfff69 70.4%,transparent 72%,transparent 82%,#ffe08c6c 82.4%,transparent 84%),
    radial-gradient(ellipse at 79% -35%,#45d9ffb3,transparent 70%),
    linear-gradient(108deg,#073675 4%,#0564b5 65%,#0e5795);
  border-bottom:1px solid #88f0ff;
  box-shadow:0 2px 8px #28caff54,inset 0 1px #baf6ff50;
}
.portal-auth .auth-heading {
  padding:clamp(15px,3vw,22px) var(--auth-gutter);
  margin:0 calc(-1 * var(--auth-gutter)) 2px;
  gap:13px;
}
.portal-auth .auth-heading .empty-mark {
  background:linear-gradient(145deg,#70dcff66,#0b57a780);
  color:#e1f9ff;
  box-shadow:inset 0 0 0 1px #82e5ffb0,0 0 11px #49d7ff48;
}
.portal-auth .auth-heading h2 { font-size:clamp(18px,4vw,22px); line-height:1.35 }
.portal-auth .auth-box .dialog-form input {
  min-height:43px;
  box-shadow:inset 0 1px 3px #216ba415;
}
.portal-auth .auth-box .primary { min-height:44px }
.portal-auth .auth-links { border-top:1px solid #9dd9f0; padding-top:12px; gap:7px }
.portal-auth .auth-links a {
  padding:5px 8px;
  text-decoration:none;
  border:1px solid #abd9f0;
  border-radius:7px;
  background:#f2fbff9e;
}
.portal-auth .auth-links a:hover { background:#c9efff }
#dialog:has([data-form="login"],[data-form="register"],[data-form="verify"]) .dialog-head .icon-button { color:#e1f9ff }
#dialog:has([data-form="login"],[data-form="register"],[data-form="verify"]) .dialog-head .icon-button:hover { background:#8be3ff33 }
.logo-preview {
  display:grid; place-items:center; min-height:112px; border:1px solid var(--line);
  border-radius:10px; background:var(--pale); padding:13px;
}
.logo-preview img { width:100%; max-width:265px; height:90px; object-fit:contain }
.branding-card { display:grid; gap:14px; max-width:520px }
.branding-card .dialog-form label input[type=file] { min-width:0; width:100% }
.ticket-star { color:#986300 }
@media(max-width:660px) {
  .brand-image { width:104px; height:37px }
  .brand-image-icon { width:30px; height:30px }
  #portal-wordmark { font-size:13px }
}

/* Shared action icons and media controls */
.hb-glyph { flex:none; vertical-align:middle; overflow:visible }
.hb-glyph-depth { stroke:#49bcf9; opacity:.35 }
.hb-glyph-art { object-fit:contain; filter:drop-shadow(0 1px 1px #066aae40) }
button .hb-glyph:not(:last-child),a .hb-glyph:not(:last-child) { margin-inline-end:4px }
button:has(>.hb-glyph):not(.icon-button,.rail-item), a:has(>.hb-glyph).secondary { align-items:center }
.icon-button:focus-visible,button:focus-visible,.sticker-upload:focus-within { outline:2px solid #0075c3; outline-offset:2px }
.sticker-tabs,.sticker-controls { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-block:0 12px }
.sticker-tabs [aria-pressed=true] { background:#c5ebff; border-color:#46afe8; color:#093a68 }
.sticker-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(58px,1fr)); gap:7px }
.sticker-grid > div { position:relative; min-width:0 }
.sticker-grid button:not(.sticker-remove) { display:grid; width:100%; aspect-ratio:1; place-items:center; background:var(--pale); border:1px solid var(--line); border-radius:10px }
.sticker-grid button:hover { background:var(--mint) }
.sticker-grid svg:not(.hb-glyph),.sticker-grid img { width:76%; height:auto; max-height:100%; object-fit:contain }
.sticker-remove { position:absolute; inset:2px 2px auto auto; border:1px solid var(--line); border-radius:50%; background:var(--surface); padding:2px }
.sticker-upload { position:relative; display:inline-flex; align-items:center; cursor:pointer }
.sticker-upload input { position:absolute; inset:0; width:100%; opacity:0; cursor:pointer }
.sticker-editor,.scan-panel,.friend-qr { display:grid; gap:10px; min-width:0 }
.sticker-editor label,.scan-panel label:has(>input[type=text]) { display:grid; gap:4px }
.sticker-editor input,.sticker-editor select,.scan-value,.friend-qr input { min-width:0; width:100%; padding:8px; border:1px solid var(--line); border-radius:7px; background:var(--surface); color:var(--ink) }
.friend-qr { justify-items:center; margin-bottom:12px }
.friend-qr > svg { width:min(220px,100%); height:auto; background:white; border-radius:8px }
.scan-panel video { width:100%; max-height:32dvh; object-fit:contain; border-radius:10px; background:#0b2648 }
.quick-results { max-height:46dvh; overflow:auto }
.quick-results button { white-space:normal; overflow-wrap:anywhere }
.compose-toolbar { flex-wrap:wrap }
.staff-compose .compose-toolbar > div { flex-wrap:wrap; min-width:0 }
.staff-compose .compose-toolbar > div .secondary { white-space:nowrap }
.compose-tools .icon-button,.staff-compose .compose-toolbar .icon-button { background:linear-gradient(150deg,#f2fbff,#cfedff); border:1px solid #a8d8f0 }
.compose-tools .icon-button:hover,.staff-compose .compose-toolbar .icon-button:hover { background:#bde9ff }
@media(max-width:660px) {
  .compose-tools,.staff-compose .compose-toolbar > div { gap:4px }
  .compose-tools .icon-button,.staff-compose .compose-toolbar .icon-button { min-width:36px; min-height:36px }
  .compose-toolbar #send-hint { display:none }
  .dialog-body { overscroll-behavior:contain }
  .sticker-grid { grid-template-columns:repeat(auto-fill,minmax(48px,1fr)) }
  .message audio,.message video,.msg audio,.msg video { max-width:100% }
  #composer,.staff-compose { padding-bottom:max(8px,env(safe-area-inset-bottom)) }
}
.media-button.sticker-message img,.media-button.gif-message img { width:auto; height:auto; max-width:min(250px,100%); max-height:210px; aspect-ratio:auto; object-fit:contain }
.media-button.sticker-message img { max-width:min(132px,100%); max-height:132px; background:none }
@media(max-width:660px) {
  .workspace:not(.mobile-chat),.workspace.no-details:not(.mobile-chat) { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto }
  .workspace:not(.mobile-chat) .sidebar { grid-row:1 }
  .workspace:not(.mobile-chat) .rail { grid-row:2; flex-direction:row; justify-content:space-around; gap:0; padding:3px 4px max(3px,env(safe-area-inset-bottom)); border-top:1px solid var(--line); border-right:0 }
  .rail-bottom { margin-top:0 }
  .rail-item { width:auto; min-width:0; flex:1 1 0; min-height:48px }
  .chat-person .detail-name { min-width:0 }
  .chat-actions { flex:none }
}
@media(max-width:430px) {
  .staff-compose .compose-toolbar [data-ui=quick] { width:36px; min-height:36px; padding:0; gap:0; font-size:0 }
  .staff-compose #staff-send { margin-inline-start:auto }
}

/* Icy-blue navigation and action icons share the same edge, core and highlight. */
.hb-glyph-depth { stroke:#51d6ff; opacity:.48 }
.hb-glyph-core { stroke:#0567af; fill:#42b4f21e; filter:drop-shadow(0 .5px .5px #02427780) }
.hb-glyph-glint { stroke:#b5f8ff; opacity:.82 }
.topbar .hb-glyph-core,.auth-heading .hb-glyph-core { stroke:#72ccff }
.topbar .global-search .hb-glyph-core { stroke:#0567af }
.rail-item .hb-glyph,.ops-nav .hb-glyph { filter:drop-shadow(0 1px 1px #0b62a03d) }
.rail-item .hb-glyph { width:22px; height:22px }
.support-sender { display:flex; align-items:center; gap:6px; flex-wrap:wrap }
.role-badge { border-radius:999px; padding:2px 7px; font-size:10px; font-weight:700; background:#e0f5ff; color:#145482; border:1px solid #a0d9f7 }
.role-badge.staff { background:#d1e8ff; color:#064e93; border-color:#8ec8f8 }
.support-site-links { margin-block:12px 0 }
.channel-list { display:grid; gap:8px; margin-top:10px }
.channel-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:10px; border:1px solid var(--line); border-radius:11px; background:var(--pale); min-width:0 }
.channel-row>div:not(.row-actions) { flex:1; min-width:min(130px,100%); overflow-wrap:anywhere }
.channel-row small,.quick-card small { display:block; color:var(--muted); margin-top:3px }
.channel-row p { margin-top:5px; color:var(--muted); white-space:pre-wrap }
.quick-results .menu .quick-card { display:flex; text-align:left; align-items:flex-start; gap:10px; overflow-wrap:anywhere }
.quick-card > span { min-width:0 }
.quick-card > span > span { display:block; margin-top:4px; white-space:pre-wrap }
.guest-app { background:var(--page) }
.guest-head { display:flex; align-items:center; gap:13px; min-height:60px; padding:8px 15px; background:linear-gradient(110deg,#063974,#0777bd); color:#fff; border-bottom:1px solid #6cd9ff }
.guest-head img { width:104px; height:38px; object-fit:contain }
.support-avatar-image,.avatar > img.support-avatar-image { object-fit:contain; object-position:center }
.avatar.support-brand-avatar { width:auto; min-width:41px; max-width:110px; padding-inline:4px; box-sizing:border-box; background:transparent; box-shadow:none }
.avatar.support-brand-avatar.large { max-width:min(180px,100%); min-width:62px }
.avatar.support-brand-avatar.small { min-width:31px; max-width:86px }
.avatar.support-brand-avatar > img.support-avatar-image { position:static; width:auto; height:calc(100% - 8px); max-width:100%; border-radius:0 }
.chat-person .avatar.support-brand-avatar { max-width:clamp(74px,19vw,132px) }
.entry-heading .support-avatar-image,.guest-head .support-avatar-image { width:auto; height:32px; max-width:110px }
#thread .msg.support-message .media-button img { width:auto; height:auto; max-width:min(100%,420px); max-height:340px; aspect-ratio:auto; object-fit:contain }
.guest-head h1 { font-size:17px; overflow-wrap:anywhere }
.guest-main { flex:1; min-height:0; display:flex; flex-direction:column; width:min(100%,720px); align-self:center; padding:10px 12px; gap:9px }
.guest-links { display:flex; gap:8px; flex-wrap:wrap }
.guest-links:empty { display:none }
#guest-status { font-size:12px; color:var(--muted); overflow-wrap:anywhere }
.guest-thread { flex:1; overflow:auto; display:flex; flex-direction:column; gap:9px; min-height:0; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--surface) }
.guest-thread:empty:has(+form:not([hidden])) { display:none }
.guest-message { max-width:86%; align-self:flex-start }
.guest-message.mine { align-self:flex-end; text-align:right }
.guest-message small { color:var(--muted) }
.guest-message p { background:var(--pale); padding:7px 10px; border:1px solid var(--line); border-radius:11px; margin-top:3px; overflow-wrap:anywhere; white-space:pre-wrap; text-align:left }
.guest-message.mine p { background:var(--bubble) }
#guest-start { padding:15px; border:1px solid var(--line); border-radius:12px; background:var(--surface) }
#guest-send { display:flex; align-items:flex-end; gap:8px; padding-bottom:env(safe-area-inset-bottom) }
#guest-send textarea { flex:1; min-width:0; resize:none; padding:8px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--ink) }

.member-entry { flex:1; min-height:0; overflow:auto; display:grid; place-items:safe center; padding:20px; background:url('/brand/auth-layers.svg') center / cover, url('/brand/blue-orbit.webp') center / cover }
.member-loading { flex:1; display:grid; place-items:center; min-height:50vh; margin:0; background:#e9f7ff; color:#154b6e; }
.member-loading[hidden] { display:none; }
.entry-card { width:min(100%,500px); border:1px solid #87dfff; border-radius:18px; overflow:hidden; background:var(--surface); box-shadow:0 12px 32px #042b654f }
.entry-heading { display:flex; align-items:flex-start; gap:12px; padding:20px; background:linear-gradient(116deg,#073a78,#0975b6); color:white }
.entry-heading p { margin-top:7px; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.55 }
.entry-body { padding:20px; display:grid; gap:15px }
.entry-body .sticker-controls { margin:0 }
.workspace.mine-open,.workspace.no-details.mine-open { grid-template-columns:auto minmax(0,1fr) }
.mine-page { min-width:0; min-height:0; overflow:auto; background:linear-gradient(150deg,var(--pale),var(--surface)) }
.mine-inner { width:min(100%,760px); margin:auto; padding:clamp(12px,3vw,28px); display:grid; gap:12px }
.mine-inner h1 { font-size:23px }
.mine-profile,.mine-card { border:1px solid var(--line); border-radius:13px; padding:12px; background:var(--surface) }
.mine-profile { display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.mine-profile > div { flex:1; min-width:0 }
.mine-profile h2,.mine-card h2 { font-size:15px }
.mine-card .menu { margin-top:7px }
.mine-card .menu button { justify-content:flex-start; min-height:42px }
.staff-tools { display:flex; flex-wrap:wrap; gap:5px; margin:8px 0 }
.staff-tools .secondary { padding:5px 7px; text-align:start }
.form-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px }
.form-pair > label { min-width:0 }
.auth-fields { display:grid; gap:10px; min-width:0 }
.auth-fields fieldset { min-width:0 }
.hb-glyph-glass { object-fit:contain; filter:drop-shadow(0 1px 1px #02498a38) }
.ops-nav { min-height:0; overflow:auto }
@media(max-width:660px) {
  .workspace.mine-open,.workspace.no-details.mine-open { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto }
  .mine-page { grid-row:1 }
  .member-entry { padding:12px }
  .entry-body,.entry-heading { padding:15px }
}
@media(max-width:380px) { .form-pair { grid-template-columns:1fr } }

.language-menu { position:relative; color:var(--ink); z-index:20; flex:none }
.language-menu summary { display:flex; align-items:center; gap:5px; cursor:pointer; list-style:none; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:6px 7px; font-size:11px; white-space:nowrap }
.language-menu summary::after { content:"▾" }
.lang-flag { width:17px; height:13px; object-fit:cover; border-radius:2px; box-shadow:0 0 0 1px #16395135; flex:none }
.language-options { position:absolute; z-index:21; inset:calc(100% + 5px) 0 auto auto; min-width:145px; max-height:55dvh; overflow:auto; padding:5px; border:1px solid var(--line); border-radius:10px; background:var(--surface); box-shadow:0 5px 18px #0c315a40 }
.language-options button { display:flex; width:100%; align-items:center; gap:8px; border-radius:6px; padding:7px; text-align:start; white-space:nowrap }
.language-options button[aria-pressed=true],.language-options button:hover { background:var(--mint) }
.translation-select { display:flex; align-items:center; gap:7px }
.translation-select select { flex:1; min-width:0 }
.date-field { position:relative; min-width:0 }
.date-field label { margin-bottom:5px }
.date-toggle { display:flex; width:100%; justify-content:flex-start; min-height:35px; text-align:start; white-space:nowrap }
.date-popover { position:absolute; inset:auto auto auto 0; z-index:5; width:min(270px,calc(100vw - 56px)); display:grid; gap:8px; padding:10px; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:0 9px 26px #08478646 }
.date-field:last-child .date-popover { inset-inline:auto 0 }
.date-nav,.date-time { display:flex; align-items:center; justify-content:space-between; gap:6px }
.date-time label { flex:1 }
.date-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:2px; text-align:center; font-size:12px }
.date-grid button { min-height:30px; border-radius:6px; background:var(--pale) }
.date-grid button:hover,.date-grid button[aria-pressed=true] { background:var(--mint); color:var(--strong); box-shadow:inset 0 0 0 1px var(--electric) }
.palette-choices { display:flex; gap:8px; flex-wrap:wrap }
.palette-choices label { min-width:96px; flex:1; text-align:center; padding:6px; border-radius:9px; border:1px solid var(--line); cursor:pointer }
.palette-choices label:has(input:checked) { outline:2px solid var(--electric) }
.palette-swatch { display:block; height:36px; border-radius:6px; background:linear-gradient(115deg,#062652,#1edfff,#ffd470) }
.palette-swatch[data-swatch=nebula] { background:linear-gradient(115deg,#251950,#b07fff,#f6a0e2) }
.palette-swatch[data-swatch=reactor] { background:linear-gradient(115deg,#063945,#25f9cc,#a1ed7b) }
.palette-swatch[data-swatch=sunset] { background:linear-gradient(115deg,#2e2a68,#d05e51,#ffe3a0) }
:root[data-palette=nebula] { --electric:#7546c5; --cyan:#d0b2ff; --header-edge:#b49ae5; --palette-head:linear-gradient(110deg,#252154,#704fc6); --palette-cast:#af85dc70 }
:root[data-palette=reactor] { --electric:#008f7e; --cyan:#78f6ce; --header-edge:#6dd6c1; --palette-head:linear-gradient(110deg,#074453,#008b78); --palette-cast:#2cbea870 }
:root[data-palette=sunset] { --electric:#ad576e; --cyan:#ffcca2; --header-edge:#f3ba92; --palette-head:linear-gradient(110deg,#312769,#a64c64,#b67248); --palette-cast:#e59b8170 }
:root:not(.dark)[data-palette=nebula] { --page:#e4d9ff; --surface:#faf7ff; --pale:#f0e9ff; --line:#d1bfee; --mint:#e6d7ff; --bubble:#eadbff; --canvas:#eee4ff; --rail:#ece0ff; --strong:#583189 }
:root:not(.dark)[data-palette=reactor] { --page:#d1f7ee; --surface:#f2fffc; --pale:#e0faf1; --line:#a9dfd3; --mint:#c4f6e6; --bubble:#c6f6e2; --canvas:#e1f9f3; --rail:#d7f6ed; --strong:#08715e }
:root:not(.dark)[data-palette=sunset] { --page:#fae1d5; --surface:#fffaf7; --pale:#fff0e6; --line:#ebc4b5; --mint:#f8dfce; --bubble:#fce0c9; --canvas:#fff1e6; --rail:#fcebe1; --strong:#823f57 }
:root[data-palette]:not([data-palette=ocean]) :is(.topbar,.ops-hero,.entry-heading,.auth-heading,.guest-head) { background:var(--palette-head) }
:root[data-palette]:not([data-palette=ocean]) :is(.member-entry,.portal-root:has(.portal-auth)) { background-image:linear-gradient(var(--palette-cast),var(--palette-cast)),url('/brand/blue-orbit.webp'); background-size:cover; background-position:center }
[data-wallpaper=nebula] { background:repeating-radial-gradient(ellipse at 92% 105%,#9556de55 0 2px,transparent 3px 32px),radial-gradient(at 13% 17%,#cfa4ff,transparent 54%),linear-gradient(130deg,#d8d7ff,#a1b4f8) }
[data-wallpaper=reactor] { background:repeating-linear-gradient(45deg,#26999029 0 1px,transparent 2px 23px),radial-gradient(at 92% 10%,#73e6bc,transparent 62%),linear-gradient(135deg,#d0faff,#8ed9d4) }
[data-wallpaper=sunset] { background:repeating-radial-gradient(ellipse at 0 100%,#ff9f795c 0 2px,transparent 3px 33px),linear-gradient(140deg,#ead4fd,#ffd5a3,#c4c8ff) }
[data-wallpaper=grid] { background:repeating-linear-gradient(90deg,#216bb446 0 1px,transparent 2px 22px),repeating-linear-gradient(0deg,#216bb446 0 1px,transparent 2px 22px),linear-gradient(135deg,#c7f0ff,#90bdf2) }
.dark :is(.chat,.staff-chat)[data-wallpaper]:not([data-wallpaper=""]) { background-blend-mode:soft-light; background-color:#133650 }
.compact-chat .msg { margin-bottom:7px }
.packet-card { display:block; width:min(245px,100%); padding:0; overflow:hidden; border:1px solid #efd5bd; border-radius:10px; background:#fff6e9; text-align:left; color:#643a24 }
.packet-cover { --packet-deep:#9c2228; --packet-light:#e45b46; --packet-text:#fff1cb; position:relative; isolation:isolate; overflow:hidden; display:grid; justify-items:center; align-content:center; gap:7px; min-height:120px; padding:16px; color:var(--packet-text); text-align:center; background:radial-gradient(ellipse at 50% -45%,var(--packet-light) 64%,var(--packet-deep) 65%) }
.packet-cover.plum { --packet-deep:#64244c; --packet-light:#b75074 }
.packet-cover.gold { --packet-deep:#9c501e; --packet-light:#db943f; --packet-text:#fff8df }
.packet-cover strong,.packet-cover span { overflow-wrap:anywhere; max-width:100% }
.packet-cover > span:last-child:empty { display:none }
.packet-emblem { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; color:#792a22; background:#f6d181; font:700 19px/1 serif; box-shadow:0 2px 7px #0003 }
.packet-cover.lantern .packet-emblem { border-radius:45% 45% 38% 38%; box-shadow:0 4px 0 -2px #f6d181 }
.packet-cover.plain .packet-emblem { display:none }
.packet-caption { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:4px 10px; padding:7px 10px; font-size:12px }
.packet-caption small { color:#815032 }
.packet-inputs { display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden }
.dialog-form .packet-inputs label { display:grid; grid-template-columns:1fr minmax(110px,52%); align-items:center; padding:10px 12px; background:var(--surface) }
.packet-inputs input { text-align:right }
.packet-options { border:1px solid var(--line); border-radius:10px; padding:10px 12px }
.packet-options[open] > * + * { margin-top:9px }
.packet-preview { border-radius:8px; overflow:hidden }
.packet-total,.packet-opening { text-align:center }
.packet-total strong,.packet-receipt { display:block; font-size:30px; font-variant-numeric:tabular-nums }
.packet-total small { display:block; color:var(--muted); margin-top:5px }
#dialog:has(.packet-inputs) [data-form="packet-send"] button[type="submit"] { background:#a52b33; color:#fff; border-color:#a52b33 }
.packet-opening .packet-cover { min-height:210px; border-radius:13px }
.packet-opening form { margin-top:14px }
.packet-opening .packet-open-button { justify-self:center; border-radius:50%; width:62px; height:62px; color:#702318; background:#f6d181; font:700 25px/1 serif; border:1px solid #c58a43 }
.packet-receipt { margin-top:14px; color:var(--strong) }
.social-people { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; max-height:135px; overflow:auto }
.social-people [hidden] { display:none }
.recipient-search { margin-bottom:7px; width:100% }
.moments-page { width:min(100%,680px); min-height:100%; margin:auto; background:var(--surface); }
.moments-toolbar { color:var(--strong); position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 20px; background:var(--surface); border-bottom:1px solid var(--line); }
.moments-toolbar h1 { font-size:20px }
.moments-cover { position:relative; height:clamp(138px,27vw,235px); margin-bottom:34px; background:#184e70 url('/lake.jpg') center 56%/cover no-repeat; }
.moments-cover::before { content:""; position:absolute; inset:0; background:linear-gradient(transparent 52%,#0b203270); }
.moments-cover-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.moments-cover-change { position:absolute; top:12px; right:12px; }
.moments-profile { position:absolute; right:20px; bottom:-19px; display:flex; align-items:center; gap:12px; color:#fff; text-shadow:0 1px 5px #0b2032; }
.moments-profile strong { align-self:start; margin-top:12px; overflow-wrap:anywhere }
.moments-profile .avatar { border:2px solid var(--surface); border-radius:8px; text-shadow:none }
.moments-feed { padding-inline:clamp(13px,3vw,24px) }
.moments-empty,.moments-points { padding:14px }
.moment-card { display:grid; grid-template-columns:auto minmax(0,1fr); gap:11px; padding:16px 0; border-bottom:1px solid var(--line); }
.moment-card > .avatar { border-radius:6px }
.moment-content { display:grid; gap:7px; min-width:0; }
.moment-content h2 { color:var(--strong); font-size:15px; overflow-wrap:anywhere }
.moment-text { white-space:pre-wrap; overflow-wrap:anywhere }
.moment-media { max-width:300px }
.moment-media img,.moment-media video { display:block; max-width:100%; max-height:300px; object-fit:contain }
.moment-meta { display:flex; gap:10px; align-items:center; color:var(--muted); font-size:12px; }
@media(max-width:430px) {
  .language-menu summary { max-width:100px; overflow:hidden }
  .language-menu summary span { overflow:hidden; text-overflow:ellipsis }
  .date-popover { position:static }
  .form-pair:has(.date-field) { grid-template-columns:1fr }
}

@font-face { font-family:HuiboEmoji; src:url('/vendor/emoji/NotoColorEmoji.ttf') format('truetype'); font-display:swap }
.unicode-grid { max-height:49dvh; overflow:auto; padding:3px }
.unicode-grid button { font:26px HuiboEmoji,"Segoe UI Emoji",sans-serif }
.emoji-group { display:flex; align-items:center; gap:9px; margin-bottom:9px }

/* Orbit variants share the original glass lighting and use individual color grades. */
[data-wallpaper=nebula] { --orbit-glass:#a996f8; --orbit-shadow:#5548ae; --orbit-light:#edf4ff }
[data-wallpaper=reactor] { --orbit-glass:#7be4cc; --orbit-shadow:#137aa1; --orbit-light:#e8fff8 }
[data-wallpaper=sunset] { --orbit-glass:#f6b485; --orbit-shadow:#7459ab; --orbit-light:#fff2da }
[data-wallpaper=grid] { --orbit-glass:#7998fa; --orbit-shadow:#204aa1; --orbit-light:#e7fbff }
[data-wallpaper=ion] { --orbit-glass:#82cdf9; --orbit-shadow:#005fa5; --orbit-light:#e8fbff }
[data-wallpaper=prism] { --orbit-glass:#d6a7df; --orbit-shadow:#6675cb; --orbit-light:#f3edff }
:is([data-wallpaper=nebula],[data-wallpaper=reactor],[data-wallpaper=sunset],[data-wallpaper=grid],[data-wallpaper=ion],[data-wallpaper=prism]) {
  background:
    radial-gradient(ellipse at 50% 34%,var(--orbit-light),transparent 76%),
    linear-gradient(155deg,transparent 35%,color-mix(in srgb,var(--orbit-shadow) 55%,transparent)),
    url('/brand/auth-layers.svg') center / cover no-repeat,
    linear-gradient(145deg,var(--orbit-glass),var(--orbit-shadow)),
    url('/brand/blue-orbit.webp') center / cover no-repeat;
  background-blend-mode:normal,normal,screen,color,normal;
}
.dark :is(.chat,.staff-chat)[data-wallpaper]:not([data-wallpaper=""]) {
  background-blend-mode:soft-light,multiply,screen,color,normal;
  --orbit-light:#20436c;
}
:root[data-palette] :is(.topbar,.ops-hero,.entry-heading,.guest-head,.portal-auth .auth-heading) {
  background-color:var(--theme-header,#073974);
  background-image:linear-gradient(112deg,var(--theme-header,#073974),color-mix(in srgb,var(--theme-header,#073974) 50%,var(--theme-accent,#007fdc)),var(--theme-header,#073974));
}
:root[data-palette] :is(.topbar,.ops-hero,.entry-heading,.guest-head) { border-color:color-mix(in srgb,var(--theme-accent,#007fdc) 45%,#ddfaff) }
:root[data-palette] :is(.rail-item.active,.ops-nav .selected,.filter.active,.staff-tabs button.selected) { border-color:color-mix(in srgb,var(--theme-accent,#007fdc) 45%,var(--line)) }
:root[data-palette] :focus-visible { outline-color:var(--theme-accent,#007fdc) }
.ops-main > .ops-card + .ops-card { margin-top:14px }