/**
 * AquaTuning Web UI の視覚要件を集約するメインスタイルシート。
 * 泡、水、淡い水色という承認済みのブランド表現を維持し、端末幅による体験差を
 * レイアウト上の都合だけで増やさないことを要件とする。
 */

:root {
  color: #173f51;
  background: #eaf7fc;
  font-family: "Noto Sans JP", sans-serif;
  font-synthesis: none;
  --ink: #174354;
  --muted: #668b9b;
  --aqua: #4aa7be;
  --aqua-deep: #277a93;
  --line: rgba(68, 135, 158, .2);
  --glass: rgba(247, 253, 255, .76);
}

* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; height: 100%; }
body { margin: 0; overflow: hidden; }
button, input, textarea, select { color: inherit; font: inherit; }
button { border: 0; cursor: pointer; }
[hidden] { display: none !important; }
svg { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.liquid-app { position: relative; width: 100%; height: 100dvh; overflow: hidden; isolation: isolate; background: #eaf7fc; }
.water-stage { position: absolute; z-index: -3; inset: 0; overflow: hidden; }
.water-stage img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.01); transition: filter 600ms ease, transform 900ms cubic-bezier(.2,.8,.2,1); }
.water-glow { position: absolute; z-index: -2; inset: 0; pointer-events: none; background: linear-gradient(110deg, rgba(255,255,255,.14), transparent 35%, rgba(212,244,250,.13)), radial-gradient(circle at 74% 42%, rgba(255,255,255,.38), transparent 29%); mix-blend-mode: screen; }

.site-header { position: absolute; z-index: 8; top: 0; left: 0; display: flex; align-items: center; width: 100%; min-height: 80px; padding: 12px clamp(18px, 3vw, 46px); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 7px 14px rgba(45,109,136,.12)); }
.brand span { display: grid; }
.brand b { font-family: "Source Han Sans JP", "Noto Sans JP", sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: .01em; }

.home-stage { position: relative; width: 100%; height: 100%; transition: filter 500ms ease, transform 700ms cubic-bezier(.2,.8,.2,1), opacity 500ms ease; }

.bubble-navigation { position: absolute; inset: 0; }
.nav-bubble { position: absolute; z-index: 3; isolation: isolate; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 13px; overflow: hidden; border: 1px solid rgba(255,255,255,.58); border-radius: 50%; color: #2c6579; background: radial-gradient(ellipse at 27% 18%, rgba(255,255,255,.96) 0 2.5%, rgba(255,255,255,.46) 7%, rgba(255,255,255,.08) 18%, transparent 32%), radial-gradient(circle at 72% 79%, rgba(76,183,208,.15), transparent 42%), rgba(228,248,252,.12); backdrop-filter: blur(2px) saturate(1.08); box-shadow: inset 8px 10px 17px rgba(255,255,255,.7), inset -15px -18px 27px rgba(56,157,184,.14), inset 0 0 18px rgba(255,255,255,.25), 0 20px 40px rgba(44,113,140,.12), 0 0 0 1px rgba(255,255,255,.22); text-align: center; transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease; animation: bubbleDrift 7s infinite ease-in-out; }
.nav-bubble::before { position: absolute; z-index: -1; inset: 6px; border: 1px solid rgba(255,255,255,.48); border-radius: 50%; background: linear-gradient(138deg, rgba(255,255,255,.12), transparent 38%, rgba(54,162,190,.06) 72%, rgba(255,255,255,.2)); box-shadow: inset 5px 7px 13px rgba(255,255,255,.28), inset -9px -12px 16px rgba(55,157,183,.07); content: ""; }
.nav-bubble::after { position: absolute; z-index: -1; inset: 1px; padding: 2px; border-radius: 50%; background: conic-gradient(from 198deg, rgba(103,214,235,.48), rgba(255,255,255,.96), rgba(238,183,232,.5), rgba(105,219,210,.68), rgba(166,197,244,.5), rgba(255,255,255,.78), rgba(103,214,235,.48)); content: ""; opacity: .9; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.nav-bubble:hover, .nav-bubble:focus-visible { outline: 0; transform: translateY(-7px) scale(1.035); background: radial-gradient(ellipse at 27% 18%, rgba(255,255,255,.98) 0 3%, rgba(255,255,255,.5) 7%, rgba(255,255,255,.1) 18%, transparent 32%), radial-gradient(circle at 72% 79%, rgba(76,183,208,.18), transparent 42%), rgba(228,248,252,.16); box-shadow: inset 8px 10px 17px rgba(255,255,255,.76), inset -15px -18px 27px rgba(56,157,184,.16), 0 29px 56px rgba(44,113,140,.2); }
.bubble-shine { position: absolute; top: 13%; left: 20%; width: 31%; height: 10%; border-radius: 50%; background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.94), rgba(255,255,255,.18)); filter: blur(1px); transform: rotate(-31deg); box-shadow: 15px 7px 13px rgba(255,255,255,.3); }
.bubble-shine::after { position: absolute; top: 135%; right: -31%; width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.82); box-shadow: 0 0 8px rgba(255,255,255,.52); content: ""; }
.nav-bubble svg { width: 29px; height: 29px; margin-bottom: 9px; filter: drop-shadow(0 1px 5px rgba(255,255,255,.82)); }
.nav-bubble b { color: #23586c; font-family: "Noto Sans JP", sans-serif; font-size: 1.05rem; font-weight: 700; line-height: 1.45; text-shadow: 0 1px 8px rgba(255,255,255,.94); }
.bubble-talk { top: 12%; right: 20%; width: 180px; height: 180px; }
.bubble-content { top: 37%; right: 6%; width: 160px; height: 160px; animation-delay: -1.6s; }
.bubble-course { right: 21%; bottom: 12%; width: 172px; height: 172px; animation-delay: -3.2s; }
.bubble-community { right: 4%; bottom: 5%; width: 158px; height: 158px; animation-delay: -4.8s; }
.bubble-shop { bottom: 5%; left: 5%; width: 158px; height: 158px; animation-delay: -5.7s; }
@keyframes bubbleDrift { 0%,100% { translate: 0 0; } 50% { translate: 0 -12px; } }

.ambient-bubbles i { position: absolute; z-index: 1; overflow: hidden; border: 1px solid rgba(255,255,255,.58); border-radius: 50%; opacity: .72; background: radial-gradient(circle at 31% 24%, rgba(255,255,255,.94) 0 5%, rgba(255,255,255,.44) 12%, transparent 29%), radial-gradient(circle at 72% 76%, rgba(241,182,220,.17), transparent 48%), radial-gradient(circle at 30% 73%, rgba(153,230,207,.16), transparent 47%), rgba(255,255,255,.07); box-shadow: inset -9px -10px 20px rgba(183,166,231,.09), inset 8px 7px 15px rgba(255,248,221,.46), 0 5px 18px rgba(70,110,126,.06); pointer-events: none; animation: ambientFloat 9s infinite ease-in-out; }
.ambient-bubbles i::before { position: absolute; inset: 0; padding: 1.3px; border-radius: 50%; background: conic-gradient(from 205deg, rgba(137,218,206,.75), rgba(255,255,255,.9), rgba(244,174,215,.78), rgba(255,226,154,.74), rgba(155,213,239,.76), rgba(212,178,240,.74), rgba(137,218,206,.75)); content: ""; opacity: .72; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.ambient-bubbles i::after { position: absolute; top: 15%; left: 20%; width: 30%; height: 10%; border-radius: 50%; background: rgba(255,255,255,.78); filter: blur(.6px); transform: rotate(-34deg); content: ""; }
.ambient-one { top: 42%; left: 7%; width: 36px; height: 36px; }
.ambient-two { right: 8%; bottom: 14%; width: 26px; height: 26px; animation-delay: -3s !important; }
.ambient-three { top: 13%; left: 7%; width: 13px; height: 13px; opacity: .58 !important; animation-delay: -1.2s !important; }
.ambient-four { top: 25%; left: 18%; width: 56px; height: 56px; opacity: .68 !important; animation-delay: -4.1s !important; }
.ambient-five { top: 45%; right: 9%; width: 18px; height: 18px; opacity: .62 !important; animation-delay: -2.2s !important; }
.ambient-six { top: 56%; left: 3%; width: 42px; height: 42px; opacity: .67 !important; animation-delay: -5.3s !important; }
.ambient-seven { top: 69%; right: 4%; width: 48px; height: 48px; opacity: .65 !important; animation-delay: -.7s !important; }
@keyframes ambientFloat { 0%,100% { transform: translateY(0) translateX(0); } 50% { transform: translateY(-28px) translateX(8px); } }

.inside-sidebar { position: fixed; z-index: 36; top: 0; bottom: 0; left: 0; display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; width: 310px; height: 100dvh; overflow: hidden; border-right: 1px solid rgba(78,145,168,.2); background: linear-gradient(180deg, rgba(237,249,253,.98), rgba(218,240,248,.98)); box-shadow: 16px 0 50px rgba(34,92,116,.16); transform: translateX(-105%); transition: transform 360ms cubic-bezier(.2,.85,.2,1); }
body.inside-nav-open .inside-sidebar { transform: translateX(0); }
.inside-brand { display: grid; grid-template-columns: 46px minmax(0,1fr) 38px; align-items: center; gap: 10px; min-height: 78px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.inside-brand > img { width: 44px; height: 44px; object-fit: contain; }
.inside-brand > div { min-width: 0; }
.inside-brand p { margin: 0 0 2px; color: #7295a4; font-family: "DM Sans", sans-serif; font-size: .5rem; font-weight: 700; letter-spacing: .13em; }
.inside-brand h2 { margin: 0; overflow: hidden; color: var(--ink); font-family: "DM Sans", sans-serif; font-size: .96rem; letter-spacing: -.03em; white-space: nowrap; text-overflow: ellipsis; }
.inside-brand > button { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; color: #648a99; background: rgba(255,255,255,.55); }
.inside-primary-shell { min-height: 50px; border-bottom: 1px solid var(--line); }
.inside-primary-toggle { display: grid; grid-template-columns: 34px minmax(0,1fr) 24px; align-items: center; gap: 8px; width: 100%; min-height: 50px; padding: 7px 12px; color: #52788a; background: rgba(255,255,255,.22); text-align: left; }
.inside-primary-toggle:hover { color: #2c687f; background: rgba(255,255,255,.5); }
.inside-primary-toggle > svg { width: 19px; height: 19px; }
.inside-primary-toggle > span { display: grid; min-width: 0; }
.inside-primary-toggle b { font-size: .7rem; }
.inside-primary-toggle small { overflow: hidden; color: #86a1ad; font-size: .54rem; white-space: nowrap; text-overflow: ellipsis; }
.inside-primary-toggle .inside-primary-chevron { width: 15px; height: 15px; transition: transform 180ms ease; }
body.inside-primary-open .inside-primary-chevron { transform: rotate(180deg); }
.inside-primary { display: none; gap: 4px; padding: 8px 10px 10px; border-top: 1px solid rgba(68,135,158,.1); }
body.inside-primary-open .inside-primary { display: grid; animation: contextIn 180ms ease both; }
.inside-main-button { display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 10px; width: 100%; min-height: 54px; padding: 7px 10px; border-radius: 14px; color: #52788a; background: transparent; text-align: left; }
.inside-main-button > svg { width: 21px; height: 21px; justify-self: center; }
.inside-main-button > span { display: grid; min-width: 0; }
.inside-main-button b { font-size: .78rem; }
.inside-main-button small { color: #86a1ad; font-size: .6rem; }
.inside-main-button:hover { color: #2c687f; background: rgba(255,255,255,.58); }
.inside-main-button.is-active { color: white; background: linear-gradient(135deg, #6db7c8, #3d8da8); box-shadow: 0 10px 25px rgba(42,119,145,.2); }
.inside-main-button.is-active small { color: rgba(255,255,255,.72); }
.inside-context { min-height: 0; overflow-y: auto; padding: 15px 10px 24px; }
.inside-context-panel { display: none; }
.inside-context-panel.is-active { display: block; animation: contextIn 240ms ease both; }
@keyframes contextIn { from { opacity: 0; transform: translateX(-5px); } }
.inside-search { position: sticky; z-index: 2; top: -15px; display: grid; grid-template-columns: 19px minmax(0,1fr); align-items: center; gap: 8px; margin: -2px 0 12px; padding: 11px 12px; border: 1px solid rgba(72,139,162,.17); border-radius: 13px; background: rgba(247,253,255,.92); box-shadow: 0 8px 22px rgba(46,105,128,.08); backdrop-filter: blur(14px); }
.inside-search svg { width: 18px; height: 18px; color: #7395a3; }
.inside-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: #315f72; background: transparent; font-size: .7rem; }
.inside-search input::placeholder { color: #91aab4; }
.inside-search input::-webkit-search-cancel-button { opacity: .45; }
.sidebar-channel-groups { display: grid; gap: 7px; }
.sidebar-group { min-width: 0; }
.sidebar-group-toggle { display: grid; grid-template-columns: 18px minmax(0,1fr); align-items: center; gap: 5px; width: 100%; min-height: 34px; padding: 5px 8px; color: #6f909e; background: transparent; text-align: left; }
.sidebar-group-toggle:hover { color: #2e687d; }
.sidebar-group-toggle svg { width: 15px; height: 15px; transition: transform 180ms ease; }
.sidebar-group-toggle b { overflow: hidden; font-size: .64rem; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.sidebar-group.is-open > .sidebar-group-toggle svg { transform: rotate(0deg); }
.sidebar-group:not(.is-open) > .sidebar-group-toggle svg { transform: rotate(-90deg); }
.sidebar-group:not(.is-open) > .sidebar-group-items { display: none; }
.sidebar-group-items { display: grid; animation: contextIn 180ms ease both; }
.inside-context-title { margin: 0 8px 9px; color: #7898a5; font-size: .64rem; font-weight: 700; letter-spacing: .04em; }
.inside-group-label { margin: 15px 9px 5px; color: #7c9aa7; font-family: "DM Sans", "Noto Sans JP", sans-serif; font-size: .57rem; font-weight: 700; letter-spacing: .06em; }
.inside-context-title + .inside-group-label { margin-top: 0; }
.inside-link { position: relative; display: grid; grid-template-columns: 24px minmax(0,1fr) 8px; align-items: center; gap: 8px; width: 100%; min-height: 41px; margin: 2px 0; padding: 0 10px; border-radius: 11px; color: #5d7c8a; background: transparent; text-align: left; }
.inside-link > span { color: #8da9b4; font-family: "DM Sans", sans-serif; font-size: .65rem; }
.inside-link > span.is-forum { font-size: .7rem; }
.inside-link > b { overflow: hidden; font-size: .72rem; white-space: nowrap; text-overflow: ellipsis; }
.inside-link > i { width: 6px; height: 6px; border-radius: 50%; background: #eb7d85; }
.inside-link:hover { color: #2d657c; background: rgba(255,255,255,.58); }
.inside-link.is-active { color: #2a6179; background: rgba(255,255,255,.9); box-shadow: inset 3px 0 #4c9db6, 0 6px 18px rgba(49,111,136,.08); }
.inside-profile { display: grid; grid-template-columns: 39px 1fr; align-items: center; gap: 9px; min-height: 64px; padding: 8px 12px; border-top: 1px solid var(--line); background: rgba(211,236,245,.76); }
.inside-profile > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 13px; color: white; background: linear-gradient(145deg, #72b8cc, #4e94ae); font-family: "DM Sans", sans-serif; font-size: .62rem; font-weight: 700; }
.inside-profile > div { display: grid; }
.inside-profile b { font-size: .72rem; }.inside-profile small { color: #7895a1; font-size: .6rem; }
.inside-sidebar-scrim { position: fixed; z-index: 35; inset: 0; display: block; background: rgba(28,70,88,.28); opacity: 0; pointer-events: none; transition: opacity 220ms ease; backdrop-filter: blur(2px); }
body.inside-nav-open .inside-sidebar-scrim { opacity: 1; pointer-events: auto; }

body.has-panel .home-stage { opacity: .42; filter: blur(4px); transform: scale(.985); }
body.has-panel .water-stage img { filter: saturate(.85) brightness(.93); transform: scale(1.045); }
.panel-scrim { position: fixed; z-index: 20; inset: 0; display: block; background: rgba(61,117,137,.12); opacity: 0; pointer-events: none; transition: opacity 350ms ease; backdrop-filter: blur(2px); }
body.has-panel .panel-scrim { opacity: 1; pointer-events: auto; }

.liquid-panel { position: fixed; z-index: 30; left: 50%; bottom: 18px; display: grid; grid-template-rows: auto auto minmax(0,1fr); width: min(900px, calc(100% - 36px)); height: min(82dvh, 760px); overflow: hidden; border: 1px solid rgba(255,255,255,.82); border-radius: 38px 38px 22px 22px; background: rgba(244,252,254,.86); box-shadow: 0 40px 110px rgba(32,94,119,.24), inset 0 1px rgba(255,255,255,.9); opacity: 0; transform: translate(-50%, 115%); pointer-events: none; transition: transform 520ms cubic-bezier(.2,.85,.2,1), opacity 300ms ease; backdrop-filter: blur(28px) saturate(1.1); content-visibility: auto; contain-intrinsic-size: 900px 760px; }
.liquid-panel > *, .panel-header, .content-intro, .content-flow { min-width: 0; max-width: 100%; }
.liquid-panel.is-active { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.panel-header { position: relative; z-index: 2; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 14px; min-height: 86px; padding: 12px 20px; border-bottom: 1px solid var(--line); background: rgba(244,252,254,.96); }
.panel-header > div { min-width: 0; }
.panel-header p, .about-header p { margin: 0 0 3px; color: #6791a1; font-family: "DM Sans", sans-serif; font-size: .55rem; font-weight: 700; letter-spacing: .16em; }
.panel-header h2, .about-header h2 { margin: 0; color: var(--ink); font-family: "Shippori Mincho", serif; font-size: 1.35rem; font-weight: 600; }
.panel-back, .panel-close, .about-header button { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; color: #4d7d8f; background: rgba(255,255,255,.62); }
.panel-back svg, .panel-close svg, .about-header button svg { width: 18px; height: 18px; }

.talk-panel { grid-template-rows: auto minmax(0,1fr); }
.talk-room-orbit { display: none; gap: 10px; padding: 14px 22px 12px; overflow-x: auto; border-bottom: 1px solid rgba(72,139,162,.12); scrollbar-width: none; }
.talk-room-orbit::-webkit-scrollbar { display: none; }
.room-bubble { display: grid; place-items: center; flex: 0 0 auto; width: 78px; height: 78px; border: 1px solid rgba(255,255,255,.78); border-radius: 50%; color: #5e8290; background: radial-gradient(circle at 31% 25%, white, rgba(225,247,250,.72) 48%, rgba(77,157,180,.14)); box-shadow: inset -6px -8px 14px rgba(77,157,180,.1), 0 7px 18px rgba(47,112,137,.08); }
.room-bubble span { color: #83a5b1; font-family: "DM Sans", sans-serif; font-size: .5rem; }
.room-bubble b { font-size: .66rem; }
.room-bubble.is-active { color: white; background: radial-gradient(circle at 30% 24%, #8ed4df, #4ba4ba 60%, #337f99); box-shadow: 0 12px 26px rgba(49,133,157,.25); }
.room-bubble.is-active span { color: rgba(255,255,255,.75); }

.conversation-shell { position: relative; display: grid; grid-template-rows: auto minmax(0,1fr) auto auto; min-height: 0; overflow: hidden; }
.conversation-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 58px; padding: 10px 24px; }
.conversation-header > div { display: flex; align-items: center; gap: 9px; }
.conversation-header span { color: #7ea5b4; font-family: "DM Sans", sans-serif; font-size: 1.2rem; }
.conversation-header h3 { margin: 0; font-size: .91rem; }
.conversation-header p { margin: 0; color: var(--muted); font-size: .68rem; }
.message-stream { min-width: 0; overflow: auto; padding: 2px 24px 20px; }
.message-load-older { display: block; margin: 8px auto 14px; border: 1px solid #c8e0e8; border-radius: 999px; padding: 7px 14px; background: #f7fcfd; color: #476c7a; font: inherit; font-size: .68rem; cursor: pointer; }
.message-load-older:disabled { cursor: progress; opacity: .55; }
.message { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 11px; padding: 12px 0; }
.message-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: white; background: linear-gradient(145deg, #5eb1c3, #367e98); font-family: "DM Sans", sans-serif; font-size: .66rem; font-weight: 700; box-shadow: 0 8px 19px rgba(44,112,138,.16); }
.message.is-member .message-avatar { color: #725b68; background: linear-gradient(145deg, #f4dce5, #ddb3c3); }
.message-body { min-width: 0; }
.message-body header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.message-body header b { color: #345f72; font-size: .77rem; }
.message-body time { color: #91aab3; font-family: "DM Sans", sans-serif; font-size: .57rem; }
.message-body > p { margin: 0; color: #345466; font-size: .78rem; line-height: 1.8; white-space: pre-wrap; }
.message-links { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.message-links a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border: 1px solid rgba(69,143,166,.2); border-radius: 999px; color: #39778e; background: rgba(255,255,255,.7); font-size: .61rem; font-weight: 700; text-decoration: none; }
.message-links a:hover { color: white; background: #559db3; }
.message-body figure { width: min(100%, 430px); margin: 11px 0 0; overflow: hidden; border-radius: 19px; }
.message-body figure img { display: block; width: 100%; max-height: 260px; object-fit: cover; }
.message-body figure.message-video { border: 1px solid rgba(79,147,169,.16); background: rgba(219,241,246,.64); box-shadow: 0 14px 35px rgba(40,99,122,.1); }
.message-video video { display: block; width: 100%; max-height: 480px; background: #d9eef4; object-fit: contain; }
.message-video figcaption { padding: 9px 12px 10px; color: #648896; font-size: .62rem; }
.message-reactions { display: flex; gap: 6px; margin-top: 8px; }
.message-reactions button { padding: 4px 9px; border: 1px solid var(--line); border-radius: 999px; color: #5e8797; background: rgba(255,255,255,.6); font-size: .62rem; }
.message-reactions button.is-active { color: white; background: #68afc0; }
.message-empty { display: grid; place-items: center; align-content: center; gap: 8px; min-height: 100%; padding: 42px 18px; color: #7898a5; text-align: center; }
.message-empty b { color: #416b7b; font-size: .9rem; }
.message-empty span { font-size: .69rem; }
.message-composer { display: grid; grid-template-columns: 36px minmax(0,1fr) 42px; align-items: center; gap: 5px; min-height: 59px; margin: 0 18px 16px; padding: 6px 7px; border: 1px solid rgba(78,147,168,.17); border-radius: 999px; background: rgba(255,255,255,.72); box-shadow: 0 13px 34px rgba(41,101,125,.09); }
.message-composer button { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #5f8998; background: rgba(221,243,248,.68); }
.message-composer button:last-child { width: 40px; height: 40px; color: white; background: linear-gradient(145deg, #68bdc7, #2f8099); }
.message-composer input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; font-size: .75rem; }
.message-composer input::placeholder { color: #91aab4; }

/* Community functions keep the same pale-aqua glass language as the approved UI. */
.inside-profile[role="button"] { cursor: pointer; }
.inside-profile[role="button"]:focus-visible { outline: 2px solid #4c9db6; outline-offset: -3px; }
.conversation-tools { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; }
.conversation-tools button { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #5d8797; background: rgba(255,255,255,.55); }
.conversation-tools button:hover { color: white; background: #62a9bc; }
.conversation-tools svg { width: 16px; height: 16px; }
.conversation-tools #notificationListButton { position: relative; }
.conversation-tools .notification-badge { position: absolute; top: -3px; right: -3px; display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; border: 2px solid #eaf8fb; border-radius: 999px; color: white; background: #dc7f98; font-family: "DM Sans", sans-serif; font-size: .46rem; font-weight: 700; line-height: 1; }
.reply-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; margin: 0 18px 7px; padding: 5px 8px 5px 14px; border: 1px solid rgba(78,147,168,.16); border-radius: 13px; color: #52798a; background: rgba(224,245,249,.84); font-size: .64rem; }
.reply-banner button { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #668f9e; background: rgba(255,255,255,.72); }
.composer-menu { position: absolute; z-index: 7; bottom: 82px; left: 18px; display: grid; width: min(270px, calc(100% - 36px)); padding: 8px; border: 1px solid rgba(255,255,255,.85); border-radius: 19px; background: rgba(241,251,253,.96); box-shadow: 0 20px 48px rgba(36,92,114,.2); backdrop-filter: blur(24px); }
.composer-menu button { display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 9px; min-height: 44px; padding: 5px 9px; border-radius: 12px; color: #416f81; background: transparent; text-align: left; }
.composer-menu button:hover { background: rgba(205,238,245,.72); }
.composer-menu span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: rgba(255,255,255,.82); }
.composer-menu b { font-size: .68rem; }
.message-composer.is-readonly { opacity: .7; }
.message-composer input:disabled { cursor: not-allowed; }

.community-drawer { position: absolute; z-index: 9; top: 86px; right: 0; bottom: 0; width: min(330px, 92%); overflow: auto; border-left: 1px solid rgba(78,145,168,.2); background: linear-gradient(180deg, rgba(244,252,254,.98), rgba(220,242,248,.98)); box-shadow: -18px 0 48px rgba(38,93,115,.16); backdrop-filter: blur(24px); }
.community-drawer > header { position: sticky; z-index: 2; top: 0; display: flex; align-items: center; justify-content: space-between; min-height: 72px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: rgba(242,251,253,.94); backdrop-filter: blur(18px); }
.community-drawer header small { color: #7599a7; font-family: "DM Sans", sans-serif; font-size: .5rem; font-weight: 700; letter-spacing: .14em; }
.community-drawer header h3 { margin: 2px 0 0; color: #315f72; font-size: .92rem; }
.community-drawer header button { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #5d8493; background: rgba(255,255,255,.72); font-size: 1.1rem; }
.community-drawer > div { padding: 10px 12px 24px; }
.community-search { display: grid; grid-template-columns: 20px minmax(0,1fr); align-items: center; gap: 8px; margin: 12px; padding: 10px 12px; border: 1px solid rgba(76,145,167,.18); border-radius: 13px; background: rgba(255,255,255,.76); }
.community-search svg { width: 17px; height: 17px; color: #7195a3; }
.community-search input { min-width: 0; border: 0; outline: 0; background: transparent; font-size: .69rem; }
.saved-search-tools { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.8fr) auto auto; gap: 5px; margin: -4px 12px 10px; }
.saved-search-tools select, .saved-search-tools input { min-width: 0; height: 32px; padding: 0 8px; border: 1px solid rgba(76,145,167,.18); border-radius: 9px; color: #547987; background: rgba(255,255,255,.7); font-size: .55rem; }
.saved-search-tools button { min-width: 42px; border-radius: 9px; color: #46798b; background: rgba(207,237,243,.82); font-size: .53rem; font-weight: 700; }
.saved-search-tools button:disabled { opacity: .45; }
.member-row, .search-result-row { width: 100%; border-radius: 13px; color: #4b7181; background: transparent; text-align: left; }
.member-row { display: grid; grid-template-columns: 40px minmax(0,1fr); align-items: center; gap: 10px; min-height: 54px; padding: 6px 8px; }
.member-row:hover, .search-result-row:hover { background: rgba(255,255,255,.68); }
.member-row > span { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 13px; color: white; background: linear-gradient(145deg, #75becb, #4a90a9); font-size: .62rem; font-weight: 700; }
.member-row > span i { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border: 2px solid #e8f7fa; border-radius: 50%; background: #8da8b2; }
.member-row > span i.status-online { background: #59bc91; }
.member-row > span i.status-idle { background: #e2ad59; }
.member-row > div { display: grid; min-width: 0; }
.member-row b { overflow: hidden; color: #3b687a; font-size: .7rem; white-space: nowrap; text-overflow: ellipsis; }
.member-row small { color: #86a3ae; font-size: .57rem; }
.search-result-row { display: grid; gap: 3px; margin-bottom: 5px; padding: 10px; }
.search-result-row small { color: #82a0ac; font-size: .54rem; }
.search-result-row b { color: #356579; font-size: .67rem; }
.search-result-row p, .drawer-empty { margin: 0; color: #5d7e8b; font-size: .63rem; line-height: 1.65; }
.drawer-empty { padding: 24px 10px; text-align: center; }
.notification-read-all { display: block; margin: 0 0 8px auto; padding: 6px 10px; border-radius: 999px; color: #548091; background: rgba(255,255,255,.66); font-size: .57rem; font-weight: 700; }
.notification-row { display: grid; gap: 4px; width: 100%; margin-bottom: 6px; padding: 11px 12px; border: 1px solid transparent; border-radius: 14px; color: #527786; background: rgba(255,255,255,.45); text-align: left; }
.notification-row.is-unread { border-color: rgba(82,159,181,.2); background: rgba(255,255,255,.84); box-shadow: 0 7px 20px rgba(44,104,126,.07); }
.notification-row small { color: #84a1ac; font-size: .52rem; }
.notification-row b { color: #37677a; font-size: .68rem; }
.notification-row p { margin: 0; font-size: .61rem; line-height: 1.6; }
.notification-row.is-unread b::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 6px 1px 0; border-radius: 50%; background: #5aabc0; }
.feature-hub-drawer { width: min(390px, 96%); }
.feature-hub-section { display: grid; gap: 7px; padding: 13px 0; border-bottom: 1px solid rgba(72,142,164,.14); }
.feature-hub-section > header { display: grid; gap: 3px; padding: 0 4px 4px; }
.feature-hub-section h4 { margin: 0; color: #315f72; font-size: .76rem; }
.feature-hub-section header p { margin: 0; color: #7897a3; font-size: .56rem; line-height: 1.5; }
.feature-card { display: grid; gap: 4px; padding: 11px 12px; border: 1px solid rgba(72,142,164,.14); border-radius: 14px; background: rgba(255,255,255,.58); }
.feature-card > b { color: #356579; font-size: .68rem; }
.feature-card > small, .feature-card > em { color: #7d9ba7; font-size: .54rem; font-style: normal; }
.feature-card > p { display: -webkit-box; margin: 1px 0 0; overflow: hidden; color: #587b89; font-size: .6rem; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.feature-action { justify-self: start; min-height: 30px; margin-top: 4px; padding: 0 11px; border-radius: 999px; color: #39778d; background: rgba(211,239,245,.9); font-size: .55rem; font-weight: 700; }
.feature-inline-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px; margin-top: 5px; }
.feature-inline-form input { min-width: 0; height: 34px; padding: 0 10px; border: 1px solid rgba(72,142,164,.18); border-radius: 10px; outline: 0; background: rgba(255,255,255,.78); font-size: .6rem; }
.feature-inline-form button { min-width: 50px; border-radius: 10px; color: white; background: #579bb1; font-size: .56rem; font-weight: 700; }

.message-attachment { border: 1px solid rgba(77,145,166,.15); background: rgba(255,255,255,.56); box-shadow: 0 13px 32px rgba(39,98,121,.08); }
.message-attachment img, .message-attachment video { display: block; width: 100%; max-height: 420px; background: #dceff4; object-fit: contain; }
.message-attachment a { display: flex; align-items: center; min-height: 48px; padding: 10px 14px; color: #39778e; font-size: .67rem; font-weight: 700; text-decoration: none; }
.message-body > p.is-deleted { color: #8ca3ac; font-style: italic; }
.message-reply-reference { display: block; max-width: 100%; margin: 0 0 5px; overflow: hidden; color: #7295a3; background: transparent; font-size: .58rem; white-space: nowrap; text-overflow: ellipsis; }
.community-message-actions { flex-wrap: wrap; }
.community-message-actions button:last-child { color: #8a7580; }
.message-poll { display: grid; gap: 7px; width: min(100%, 430px); margin-top: 11px; padding: 13px; border: 1px solid rgba(68,140,162,.17); border-radius: 17px; background: rgba(255,255,255,.64); }
.message-poll > b { margin-bottom: 3px; color: #315f72; font-size: .73rem; }
.message-poll > button { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 38px; padding: 0 10px; overflow: hidden; border: 1px solid rgba(75,143,164,.16); border-radius: 11px; color: #4b7181; background: rgba(229,246,249,.58); text-align: left; }
.message-poll > button i { position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; width: var(--poll-progress); background: rgba(103,187,201,.18); }
.message-poll > button span, .message-poll > button small { position: relative; z-index: 1; }
.message-poll > button span { font-size: .64rem; }
.message-poll > button small, .message-poll > small { color: #7596a3; font-size: .54rem; }
.message-poll > button.is-active { border-color: #5ba8bd; box-shadow: inset 0 0 0 1px rgba(91,168,189,.25); }

.community-dialog { width: min(440px, calc(100% - 28px)); max-height: min(88dvh, 720px); padding: 0; overflow: auto; border: 1px solid rgba(255,255,255,.9); border-radius: 27px; color: #315f72; background: rgba(239,250,253,.98); box-shadow: 0 34px 100px rgba(29,81,103,.3); backdrop-filter: blur(28px); }
.community-dialog::backdrop { background: rgba(31,75,93,.34); backdrop-filter: blur(4px); }
.dialog-close-form { position: sticky; z-index: 3; top: 0; height: 0; text-align: right; }
.dialog-close-form button { width: 36px; height: 36px; margin: 12px; border-radius: 50%; color: #688d9b; background: rgba(255,255,255,.8); font-size: 1.1rem; }
.dialog-heading { padding: 30px 26px 17px; }
.dialog-heading small { color: #70a0b0; font-family: "DM Sans", sans-serif; font-size: .5rem; font-weight: 700; letter-spacing: .15em; }
.dialog-heading h2 { margin: 5px 0 7px; color: #28596d; font-size: 1.18rem; }
.dialog-heading p { margin: 0; color: #6a8b98; font-size: .66rem; line-height: 1.7; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 0 26px 8px; padding: 4px; border-radius: 999px; background: rgba(207,235,242,.75); }
.auth-tabs button { min-height: 36px; border-radius: 999px; color: #648895; background: transparent; font-size: .65rem; font-weight: 700; }
.auth-tabs button.is-active { color: white; background: linear-gradient(135deg, #72bdca, #418da6); }
.community-form { display: grid; gap: 12px; padding: 12px 26px 28px; }
.profile-form { padding-bottom: 20px; border-bottom: 1px solid rgba(74,142,163,.17); }
.community-form label { display: grid; gap: 6px; color: #597d8b; font-size: .61rem; font-weight: 700; }
.community-form input, .community-form textarea, .community-form select { width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid rgba(70,139,161,.18); border-radius: 12px; outline: 0; color: #315e70; background: rgba(255,255,255,.78); font-size: .7rem; }
.community-form textarea { min-height: 80px; resize: vertical; }
.community-form input:focus, .community-form textarea:focus, .community-form select:focus { border-color: #5ea9bd; box-shadow: 0 0 0 3px rgba(94,169,189,.12); }
.community-form .form-check { display: flex; grid-template-columns: none; align-items: center; gap: 8px; }
.community-form .form-check input { width: 17px; min-height: 17px; padding: 0; }
.form-primary { min-height: 45px; border-radius: 999px; color: white; background: linear-gradient(135deg, #70bdca, #3f8ca5); font-size: .68rem; font-weight: 700; }
.auth-guidance { margin: 0; color: #6f909c; font-size: .61rem; line-height: 1.75; }
.form-secondary { min-height: 42px; border: 1px solid rgba(73,142,164,.18); border-radius: 999px; color: #5b8190; background: rgba(255,255,255,.66); font-size: .66rem; font-weight: 700; }
.form-error { min-height: 1em; margin: 0; color: #b46879; font-size: .61rem; }
.profile-admin { margin: 0 26px 28px; padding-top: 20px; border-top: 1px solid rgba(74,142,163,.17); }
.profile-admin > header { display: grid; gap: 4px; }
.profile-admin > header small { color: #70a0b0; font-family: "DM Sans", sans-serif; font-size: .5rem; font-weight: 700; letter-spacing: .15em; }
.profile-admin > header h3 { margin: 0; color: #315f72; font-size: .84rem; }
.profile-admin > header p { margin: 0; color: #74929e; font-size: .61rem; }
.profile-admin .community-form { padding: 14px 0 8px; }
.invite-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.invite-list { display: grid; gap: 7px; }
.invite-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 10px 11px; border: 1px solid rgba(72,142,164,.15); border-radius: 13px; background: rgba(255,255,255,.58); }
.invite-row > div { display: grid; gap: 2px; min-width: 0; }
.invite-row code { overflow: hidden; color: #326c81; font-family: "DM Sans", sans-serif; font-size: .68rem; font-weight: 700; letter-spacing: .06em; white-space: nowrap; text-overflow: ellipsis; }
.invite-row small { color: #7f9ca7; font-size: .52rem; }
.invite-row button { min-height: 32px; padding: 0 11px; border-radius: 999px; color: #4c7c8e; background: rgba(213,239,245,.88); font-size: .56rem; font-weight: 700; }
.gift-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.gift-options button { display: grid; justify-items: center; gap: 3px; min-width: 0; padding: 10px 5px; border: 1px solid rgba(73,142,164,.16); border-radius: 14px; color: #527988; background: rgba(255,255,255,.56); text-align: center; }
.gift-options button.is-active { border-color: #5daabf; background: rgba(205,239,244,.8); box-shadow: inset 0 0 0 1px rgba(93,170,191,.22); }
.gift-options span { font-size: 1.25rem; }
.gift-options b { overflow: hidden; max-width: 100%; font-size: .58rem; white-space: nowrap; text-overflow: ellipsis; }
.gift-options small { display: none; }

.content-panel { grid-template-rows: auto auto minmax(0,1fr); }
.content-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 18px 25px 12px; }
.content-intro > div { min-width: 0; }
.content-intro h3 { margin: 0 0 4px; color: #2c586a; font-family: "Shippori Mincho", serif; font-size: 1rem; font-weight: 600; }
.content-intro p { margin: 0; color: #597f8f; font-family: "Shippori Mincho", serif; font-size: .82rem; }
.content-intro span { color: #7da0ad; font-family: "DM Sans", sans-serif; font-size: .55rem; font-weight: 700; letter-spacing: .12em; }
.content-flow { min-height: 0; margin: 0; padding: 2px 22px 26px; overflow-y: auto; list-style: none; }
.content-flow li { margin: 0; }
.content-flow li > button { display: grid; grid-template-columns: 36px 92px minmax(0,1fr) 42px; align-items: center; gap: 14px; width: 100%; min-height: 99px; padding: 10px 7px; border-bottom: 1px solid var(--line); background: transparent; text-align: left; transition: transform 180ms ease, background 180ms ease; }
.content-flow li > button:hover { transform: translateX(5px); background: rgba(255,255,255,.35); }
.content-number { color: #759dab; font-family: "DM Sans", sans-serif; font-size: .65rem; font-weight: 700; }
.content-flow figure { height: 76px; margin: 0; overflow: hidden; border-radius: 24px 24px 24px 9px; }
.content-flow figure img { width: 100%; height: 100%; object-fit: cover; }
.content-flow li:nth-child(even) figure { border-radius: 24px 9px 24px 24px; }
.content-flow li > button > div { display: grid; min-width: 0; }
.content-flow small { color: #83a2ad; font-family: "DM Sans", sans-serif; font-size: .53rem; font-weight: 700; letter-spacing: .07em; }
.content-flow b { margin: 5px 0 11px; overflow: hidden; color: #2d586a; font-size: .81rem; white-space: nowrap; text-overflow: ellipsis; }
.content-flow i { display: block; height: 3px; overflow: hidden; border-radius: 999px; background: #dcecf1; }
.content-flow em { display: block; width: var(--progress); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7bc8d2, #3f92aa); }
.content-flow li > button > svg { justify-self: center; width: 21px; height: 21px; color: #5c94a6; }
.content-flow li.is-opened > button { background: rgba(220,247,248,.65); }
.content-item-detail { display: none; gap: 14px; margin: 0 0 14px 50px; padding: 19px; border: 1px solid rgba(68,135,158,.15); border-radius: 18px; background: rgba(255,255,255,.62); box-shadow: 0 13px 34px rgba(41,101,125,.07); }
.content-flow li.is-opened > .content-item-detail { display: grid; animation: contextIn 220ms ease both; }
.content-item-detail p { margin: 0; color: #4d7383; font-size: .71rem; line-height: 1.85; }
.content-item-detail iframe, .content-item-detail video { display: block; width: min(100%, 620px); aspect-ratio: 16 / 9; border: 0; border-radius: 14px; background: #d9edf3; object-fit: contain; }
.content-item-detail a { display: inline-flex; align-items: center; justify-content: center; justify-self: start; min-height: 37px; padding: 0 14px; border-radius: 999px; color: white; background: linear-gradient(135deg, #69b8c7, #3d8da6); font-size: .63rem; font-weight: 700; text-decoration: none; }

.shop-panel { grid-template-rows: auto minmax(0,1fr); }
.shop-panel .panel-header h2 { font-family: "Source Han Sans JP", "Noto Sans JP", sans-serif; font-weight: 700; }
.shop-scroll { min-height: 0; overflow-y: auto; scroll-behavior: smooth; }
.shop-hero { display: grid; grid-template-columns: 46% 54%; min-height: 360px; height: clamp(440px, 62vh, 560px); border-bottom: 1px solid var(--line); scroll-margin-top: 18px; background: rgba(247,253,255,.48); }
.shop-hero > img { width: 100%; height: 100%; min-height: 330px; object-fit: cover; }
.shop-hero > div { align-self: center; padding: 38px; }
.shop-hero p { margin: 0 0 10px; color: #65a0b2; font-family: "DM Sans", sans-serif; font-size: .56rem; font-weight: 700; letter-spacing: .17em; }
.shop-hero h3 { margin: 0 0 18px; color: #204c5f; font-family: "Shippori Mincho", serif; font-size: 1.75rem; font-weight: 500; line-height: 1.5; }
.shop-hero span { display: block; color: #557987; font-size: .74rem; line-height: 1.9; }
.shop-primary-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-width: 220px; min-height: 48px; margin-top: 25px; padding: 0 18px; border-radius: 999px; color: white; background: linear-gradient(135deg, #70bfce, #3d8fa8); box-shadow: 0 14px 32px rgba(49,133,158,.22); font-size: .68rem; font-weight: 700; text-decoration: none; transition: transform 180ms ease, box-shadow 180ms ease; }
.shop-primary-link:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(49,133,158,.28); }
.shop-primary-link svg { width: 18px; height: 18px; }
.shop-information { padding: 50px 46px 54px; border-bottom: 1px solid var(--line); scroll-margin-top: 18px; background: linear-gradient(135deg, rgba(235,249,252,.76), rgba(255,255,255,.54)); }
.shop-section-heading { max-width: 600px; }
.shop-section-heading > p, .shop-store-copy > p { margin: 0 0 10px; color: #67a2b4; font-family: "DM Sans", sans-serif; font-size: .55rem; font-weight: 700; letter-spacing: .16em; }
.shop-section-heading h3, .shop-store-copy h3 { margin: 0 0 12px; color: #244f61; font-family: "Shippori Mincho", serif; font-size: 1.55rem; font-weight: 500; }
.shop-section-heading > span, .shop-store-copy > span { display: block; color: #648592; font-size: .72rem; line-height: 1.9; }
.shop-purpose-list { margin: 30px 0 34px; padding: 0; border-top: 1px solid rgba(66,137,160,.17); list-style: none; }
.shop-purpose-list li { display: grid; grid-template-columns: 46px minmax(0,1fr); align-items: center; min-height: 52px; border-bottom: 1px solid rgba(66,137,160,.17); }
.shop-purpose-list span { color: #75a8b7; font-family: "DM Sans", sans-serif; font-size: .55rem; font-weight: 700; }
.shop-purpose-list b { color: #416a79; font-size: .7rem; font-weight: 600; }
.shop-guide-columns { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); border-top: 1px solid rgba(66,137,160,.17); border-bottom: 1px solid rgba(66,137,160,.17); }
.shop-guide-columns section { padding: 26px 24px 27px 0; }
.shop-guide-columns section + section { padding-right: 0; padding-left: 24px; border-left: 1px solid rgba(66,137,160,.17); }
.shop-guide-columns small { color: #75a8b7; font-family: "DM Sans", sans-serif; font-size: .51rem; font-weight: 700; letter-spacing: .13em; }
.shop-guide-columns h4 { margin: 7px 0 10px; color: #315d6f; font-size: .79rem; }
.shop-guide-columns p { margin: 0; color: #698994; font-size: .66rem; line-height: 1.85; }
.shop-text-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 25px; color: #397b93; font-size: .65rem; font-weight: 700; text-decoration: none; }
.shop-text-link svg { width: 16px; height: 16px; transition: transform 180ms ease; }
.shop-text-link:hover svg { transform: translateX(4px); }
.shop-product-directory { margin-top: 32px; border-top: 1px solid rgba(66,137,160,.2); }
.shop-product-directory > section { display: grid; grid-template-columns: minmax(150px, .72fr) minmax(240px, 1.35fr) minmax(170px, .75fr); align-items: start; gap: 24px; padding: 29px 0; border-bottom: 1px solid rgba(66,137,160,.2); scroll-margin-top: 18px; }
.shop-product-directory small, .shop-order-note small { color: #75a8b7; font-family: "DM Sans", sans-serif; font-size: .51rem; font-weight: 700; letter-spacing: .13em; }
.shop-product-directory h4 { margin: 7px 0 0; color: #315d6f; font-size: .8rem; }
.shop-product-directory p, .shop-order-note p { margin: 0; color: #698994; font-size: .66rem; line-height: 1.85; }
.shop-product-directory a { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 38px; padding: 0 13px; border: 1px solid rgba(65,137,160,.24); border-radius: 999px; color: #39778d; background: rgba(255,255,255,.58); font-size: .58rem; font-weight: 700; text-decoration: none; }
.shop-product-directory a:hover { color: white; background: #559db3; }
.shop-product-directory a svg { flex: 0 0 auto; width: 14px; height: 14px; }
.shop-product-links { display: grid; gap: 7px; }
.shop-order-note { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 24px; padding-top: 29px; }
.shop-store { display: grid; grid-template-columns: minmax(0,44%) minmax(0,56%); min-height: 520px; scroll-margin-top: 18px; background: rgba(247,253,255,.62); }
.shop-store figure { position: relative; min-height: 520px; margin: 0; overflow: hidden; }
.shop-store figure::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, transparent 60%, rgba(17,62,78,.3)); pointer-events: none; }
.shop-store figure img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; }
.shop-store figcaption { position: absolute; z-index: 1; right: 20px; bottom: 19px; color: white; font-family: "DM Sans", sans-serif; font-size: .52rem; font-weight: 700; letter-spacing: .16em; }
.shop-store-copy { align-self: center; padding: 44px; }
.shop-store-copy h3 small { font-family: "Noto Sans JP", sans-serif; font-size: .7rem; font-weight: 600; }
.shop-store dl { margin: 27px 0 0; border-top: 1px solid rgba(66,137,160,.18); }
.shop-store dl > div { display: grid; grid-template-columns: 76px minmax(0,1fr); gap: 12px; padding: 13px 0; border-bottom: 1px solid rgba(66,137,160,.18); }
.shop-store dt { color: #75a8b7; font-family: "DM Sans", sans-serif; font-size: .5rem; font-weight: 700; letter-spacing: .09em; }
.shop-store dd { margin: 0; color: #416777; font-size: .65rem; line-height: 1.7; }
.shop-store dd a { color: inherit; text-decoration: none; }
.shop-store dd small { color: #7897a3; font-size: .56rem; }
.shop-store-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.shop-store-actions a { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 13px; border: 1px solid rgba(65,137,160,.24); border-radius: 999px; color: #39778d; background: rgba(255,255,255,.58); font-size: .58rem; font-weight: 700; text-decoration: none; transition: color 180ms ease, background 180ms ease; }
.shop-store-actions a:hover { color: white; background: #559db3; }
.shop-store-actions svg { width: 14px; height: 14px; }

.about-sidebar { position: fixed; z-index: 32; top: 0; right: 0; display: grid; grid-template-rows: auto auto minmax(0,1fr); width: min(510px, 100%); height: 100dvh; border-left: 1px solid rgba(255,255,255,.8); background: rgba(244,252,253,.9); box-shadow: -32px 0 100px rgba(33,93,117,.21); transform: translateX(105%); pointer-events: none; transition: transform 540ms cubic-bezier(.2,.85,.2,1); backdrop-filter: blur(30px) saturate(1.08); content-visibility: auto; contain-intrinsic-size: 510px 100dvh; }
.about-sidebar.is-active { transform: translateX(0); pointer-events: auto; }
.about-header { display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; align-items: center; gap: 14px; min-height: 86px; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.about-header > div { min-width: 0; }
.about-nav { display: flex; gap: 5px; padding: 10px 14px; overflow-x: auto; border-bottom: 1px solid rgba(68,135,158,.13); scrollbar-width: none; }
.about-nav::-webkit-scrollbar { display: none; }
.about-nav button { flex: 1 0 auto; min-height: 35px; padding: 0 13px; border-radius: 999px; color: #5d8392; background: rgba(255,255,255,.48); font-size: .64rem; font-weight: 600; }
.about-nav button:hover { color: white; background: #67adbd; }
.about-scroll { min-height: 0; overflow-y: auto; scroll-behavior: smooth; }
.about-hero { position: relative; min-height: 530px; padding: 290px 30px 52px; overflow: hidden; }
.about-hero > img { position: absolute; inset: 0 0 auto; width: 100%; height: 260px; object-fit: cover; }
.about-hero::after { position: absolute; top: 190px; left: 0; width: 100%; height: 110px; background: linear-gradient(transparent, rgba(244,252,253,.96)); content: ""; }
.about-hero p, .about-copy > p:first-child, .navigator-card div > p, .community-card div > p { margin: 0 0 10px; color: #65a0b2; font-family: "DM Sans", sans-serif; font-size: .56rem; font-weight: 700; letter-spacing: .17em; }
.about-hero h3, .about-copy h3, .navigator-card h3, .community-card h3 { position: relative; margin: 0 0 18px; color: #204c5f; font-family: "Shippori Mincho", serif; font-size: 2rem; font-weight: 500; line-height: 1.45; }
.about-hero > span, .navigator-card div > span, .community-card div > span { position: relative; color: #507484; font-size: .76rem; line-height: 2; }
.about-copy { padding: 60px 30px; background: linear-gradient(145deg, rgba(218,244,246,.7), rgba(247,253,254,.82)); }
.about-copy > p:not(:first-child) { margin: 0; color: #4f7584; font-size: .78rem; line-height: 2; }
.about-copy ol { margin: 32px 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.about-copy li { display: grid; grid-template-columns: 30px 78px 1fr; align-items: center; gap: 8px; min-height: 62px; border-bottom: 1px solid var(--line); }
.about-copy li span { color: #74a0af; font-family: "DM Sans", sans-serif; font-size: .56rem; }
.about-copy li b { color: #356173; font-size: .72rem; }
.about-copy li small { color: #6e909c; font-size: .65rem; }
.navigator-card { display: grid; grid-template-columns: 44% 56%; align-items: stretch; min-height: 430px; }
.navigator-card > img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.navigator-card > div { align-self: center; padding: 35px 26px; }
.navigator-card h3 { font-size: 1.42rem; }
.community-card { position: relative; min-height: 590px; overflow: hidden; color: white; background: #327a8f; }
.community-card > img { width: 100%; height: 320px; object-fit: cover; }
.community-card > div { padding: 39px 30px 55px; }
.community-card div > p, .community-card h3, .community-card div > span { color: white; }
.community-card button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; margin-top: 26px; padding: 0 17px; border-radius: 999px; color: #2e7186; background: white; font-size: .72rem; font-weight: 700; }

/* Admin console reuses the pale-aqua glass language with a mobile-first two-level navigation. */
.admin-panel { grid-template-rows: auto minmax(0,1fr); }
.admin-shell { position: relative; display: grid; min-height: 0; overflow: hidden; }
.admin-gate { display: grid; place-items: center; align-content: center; gap: 10px; min-height: 0; overflow-y: auto; padding: 46px 26px; color: #587c8b; text-align: center; }
.admin-gate b { color: #35637a; font-size: .92rem; }
.admin-gate p { margin: 0; max-width: 420px; font-size: .68rem; line-height: 1.9; }
.admin-home { min-height: 0; overflow-y: auto; padding: 12px 16px calc(26px + env(safe-area-inset-bottom)); }
.admin-group-label { margin: 15px 5px 7px; color: #7c9aa7; font-family: "DM Sans", "Noto Sans JP", sans-serif; font-size: .57rem; font-weight: 700; letter-spacing: .08em; }
.admin-home-grid { display: grid; gap: 8px; }
.admin-card { display: grid; grid-template-columns: 40px minmax(0,1fr) 20px; align-items: center; gap: 11px; width: 100%; min-height: 64px; padding: 9px 12px; border: 1px solid rgba(72,142,164,.16); border-radius: 16px; color: #437082; background: rgba(255,255,255,.6); text-align: left; }
.admin-card:hover, .admin-card:focus-visible { background: rgba(255,255,255,.88); }
.admin-card > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 13px; color: #33718a; background: rgba(213,239,245,.9); font-size: .95rem; }
.admin-card > div { display: grid; gap: 2px; min-width: 0; }
.admin-card b { font-size: .73rem; }
.admin-card small { color: #7d9ba7; font-size: .56rem; line-height: 1.5; }
.admin-card > svg { width: 15px; height: 15px; color: #86a8b6; transform: rotate(-90deg); }
.admin-section { display: grid; grid-template-rows: auto minmax(0,1fr); min-height: 0; }
.admin-section-header { display: grid; grid-template-columns: 38px minmax(0,1fr) 38px; align-items: center; gap: 10px; min-height: 58px; padding: 8px 14px; border-bottom: 1px solid var(--line); background: rgba(244,252,254,.9); }
.admin-section-header > div { display: grid; min-width: 0; }
.admin-section-header small { color: #7599a7; font-family: "DM Sans", sans-serif; font-size: .5rem; font-weight: 700; letter-spacing: .13em; }
.admin-section-header h3 { margin: 0; overflow: hidden; color: #2c5c70; font-size: .95rem; white-space: nowrap; text-overflow: ellipsis; }
.admin-section-header button { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #4d7d8f; background: rgba(255,255,255,.66); }
.admin-section-header button svg { width: 16px; height: 16px; }
.admin-section-body { display: grid; align-content: start; gap: 12px; min-height: 0; overflow-y: auto; padding: 14px 16px calc(28px + env(safe-area-inset-bottom)); }
.admin-block { display: grid; gap: 8px; padding: 13px 13px 15px; border: 1px solid rgba(72,142,164,.15); border-radius: 17px; background: rgba(255,255,255,.55); }
.admin-block > header { display: grid; gap: 3px; }
.admin-block > header h4 { margin: 0; color: #315f72; font-size: .78rem; }
.admin-block > header p { margin: 0; color: #7897a3; font-size: .58rem; line-height: 1.6; }
.admin-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.admin-toolbar input, .admin-toolbar select { min-width: 0; height: 36px; padding: 0 10px; border: 1px solid rgba(70,139,161,.18); border-radius: 11px; outline: 0; color: #315e70; background: rgba(255,255,255,.78); font-size: .64rem; }
.admin-toolbar input { flex: 1 1 130px; }
.admin-toolbar button { min-height: 36px; padding: 0 12px; border-radius: 999px; color: #39778d; background: rgba(211,239,245,.9); font-size: .58rem; font-weight: 700; }
.admin-list { display: grid; gap: 7px; }
.admin-row { display: grid; gap: 4px; padding: 11px 12px; border: 1px solid rgba(72,142,164,.14); border-radius: 14px; background: rgba(255,255,255,.62); }
.admin-row-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.admin-row-head b { color: #35637a; font-size: .7rem; overflow-wrap: anywhere; }
.admin-row > small { color: #7d9ba7; font-size: .56rem; line-height: 1.55; overflow-wrap: anywhere; }
.admin-row > p { margin: 0; color: #587b89; font-size: .62rem; line-height: 1.65; overflow-wrap: anywhere; }
.admin-row-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.admin-action { min-height: 32px; padding: 0 11px; border: 1px solid rgba(65,137,160,.22); border-radius: 999px; color: #39778d; background: rgba(255,255,255,.68); font-size: .56rem; font-weight: 700; }
.admin-action:hover:not(:disabled) { color: white; background: #559db3; }
.admin-action:disabled { opacity: .5; cursor: progress; }
.admin-action.is-danger { color: #a2596c; border-color: rgba(180,104,121,.3); }
.admin-action.is-danger:hover:not(:disabled) { color: white; background: #b46879; }
.admin-action.is-primary { color: white; border: 0; background: linear-gradient(135deg, #70bdca, #3f8ca5); }
.admin-badge { display: inline-flex; align-items: center; min-height: 18px; padding: 1px 8px; border-radius: 999px; color: #557c8b; background: rgba(213,236,243,.85); font-size: .5rem; font-weight: 700; }
.admin-badge.is-ok { color: #3d7d5f; background: rgba(197,235,215,.85); }
.admin-badge.is-warn { color: #8a6b3a; background: rgba(243,228,192,.9); }
.admin-badge.is-danger { color: #9c5468; background: rgba(240,214,221,.9); }
.admin-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.admin-pager span { color: #7897a3; font-size: .56rem; }
.admin-pager button { min-height: 32px; padding: 0 12px; border-radius: 999px; color: #46798b; background: rgba(207,237,243,.82); font-size: .56rem; font-weight: 700; }
.admin-pager button:disabled { opacity: .4; }
.admin-form { display: grid; gap: 9px; }
.admin-form label { display: grid; gap: 5px; color: #597d8b; font-size: .58rem; font-weight: 700; }
.admin-form input, .admin-form textarea, .admin-form select { width: 100%; min-height: 40px; padding: 8px 11px; border: 1px solid rgba(70,139,161,.18); border-radius: 11px; outline: 0; color: #315e70; background: rgba(255,255,255,.78); font-size: .66rem; }
.admin-form textarea { min-height: 72px; resize: vertical; }
.admin-form input:focus, .admin-form textarea:focus, .admin-form select:focus { border-color: #5ea9bd; box-shadow: 0 0 0 3px rgba(94,169,189,.12); }
.admin-form .form-check { display: flex; align-items: center; gap: 8px; }
.admin-form .form-check input { width: 16px; min-height: 16px; padding: 0; }
.admin-form [type="submit"] { min-height: 40px; border-radius: 999px; color: white; background: linear-gradient(135deg, #70bdca, #3f8ca5); font-size: .62rem; font-weight: 700; }
.admin-form [type="submit"]:disabled { opacity: .6; cursor: progress; }
.admin-form-note { min-height: 1em; margin: 0; color: #4f8a71; font-size: .56rem; }
.admin-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.admin-permission-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 8px; }
.admin-permission-grid .form-check { color: #597d8b; font-size: .56rem; font-weight: 600; }
.admin-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.admin-stat { display: grid; gap: 2px; padding: 11px 12px; border: 1px solid rgba(72,142,164,.14); border-radius: 14px; background: rgba(255,255,255,.62); }
.admin-stat b { color: #2c5c70; font-family: "DM Sans", "Noto Sans JP", sans-serif; font-size: 1.05rem; }
.admin-stat small { color: #7d9ba7; font-size: .54rem; }
.admin-confirm-impact { margin: 0; padding: 10px 12px; border: 1px solid rgba(180,104,121,.25); border-radius: 12px; color: #9c5468; background: rgba(240,214,221,.5); font-size: .62rem; line-height: 1.7; }
.admin-danger-action { background: linear-gradient(135deg, #cf8496, #b05a70); }
.admin-secret-value { display: block; padding: 12px; border: 1px solid rgba(70,139,161,.2); border-radius: 12px; color: #2c5c70; background: rgba(255,255,255,.85); font-family: "DM Sans", monospace; font-size: .66rem; word-break: break-all; user-select: all; }

@media (min-width: 721px) {
  .admin-home-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .admin-section-body > * { max-width: 720px; }
}

.toast { position: fixed; z-index: 60; left: 50%; bottom: 24px; max-width: calc(100vw - 30px); padding: 10px 16px; border-radius: 999px; color: white; background: rgba(35,94,116,.91); font-size: .7rem; opacity: 0; transform: translate(-50%, 14px); pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; box-shadow: 0 14px 42px rgba(31,87,108,.22); }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 721px) {
  .liquid-panel { top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100dvh; border: 0; border-radius: 0; transform: translateY(105%); }
  .liquid-panel.is-active { transform: translateY(0); }
  .about-sidebar { width: 100%; }
}

@media (max-width: 720px) {
  .water-stage img { object-position: center; }
  .site-header { min-height: 68px; padding: 8px 12px; }
  .brand img { width: 40px; height: 40px; }
  .brand b { font-size: .86rem; }
  .nav-bubble { padding: 9px; backdrop-filter: blur(2px) saturate(1.08); }
  .nav-bubble svg { width: 25px; height: 25px; margin-bottom: 7px; }
  .nav-bubble b { font-size: .9rem; line-height: 1.4; }
  .bubble-talk { top: 16.5%; right: auto; left: 43%; width: 112px; height: 112px; }
  .bubble-content { top: 34%; right: 3%; left: auto; width: 106px; height: 106px; }
  .bubble-course { top: 65%; right: auto; bottom: auto; left: 27%; width: 114px; height: 114px; }
  .bubble-community { top: 83%; right: 18%; bottom: auto; left: auto; width: 108px; height: 108px; }
  .bubble-shop { top: 83%; right: auto; bottom: auto; left: 5%; width: 108px; height: 108px; }
  .bubble-course b { font-size: .78rem; }
  .bubble-community b { font-size: .69rem; }
  .bubble-shop b { font-size: .76rem; letter-spacing: .04em; }
  .ambient-one { top: 43%; left: 3%; width: 30px; height: 30px; }
  .ambient-two { top: auto; right: 4%; bottom: 13%; left: auto; width: 24px; height: 24px; }
  .ambient-three { top: 12%; left: 8%; width: 12px; height: 12px; }
  .ambient-four { top: 27%; left: 12%; width: 50px; height: 50px; }
  .ambient-five { top: 45%; right: 4%; width: 18px; height: 18px; }
  .ambient-six { top: 55%; left: 2%; width: 36px; height: 36px; }
  .ambient-seven { top: 71%; right: 5%; width: 44px; height: 44px; }

  .inside-sidebar { width: min(88vw, 330px); transform: translateX(-105%); }
  body.inside-nav-open .inside-sidebar { transform: translateX(0); }
  .inside-brand { padding-top: max(10px, env(safe-area-inset-top)); }

  .liquid-panel { inset: 0; left: 0; width: 100%; height: 100dvh; border: 0; border-radius: 0; transform: translateY(105%); }
  .liquid-panel.is-active { transform: translateY(0); }
  .panel-header { grid-template-columns: 40px minmax(0,1fr) 40px; width: 100%; min-height: 72px; padding: max(8px, env(safe-area-inset-top)) 10px 7px; }
  .panel-header h2 { overflow: hidden; font-size: 1.06rem; white-space: nowrap; text-overflow: ellipsis; }
  .panel-back, .panel-close { width: 38px; height: 38px; }
  .talk-room-orbit { gap: 8px; padding: 10px 12px; }
  .room-bubble { width: 67px; height: 67px; }
  .conversation-header { display: block; min-height: 56px; padding: 9px 15px; }
  .conversation-header p { margin-top: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .message-stream { padding: 0 14px 14px; }
  .message { grid-template-columns: 36px minmax(0,1fr); gap: 9px; padding: 10px 0; }
  .message-avatar { width: 34px; height: 34px; }
  .message-body > p { overflow-wrap: anywhere; font-size: .74rem; }
  .message-body figure { width: 100%; max-width: 100%; border-radius: 16px; }
  .message-composer { min-height: 53px; margin: 0 9px max(8px, env(safe-area-inset-bottom)); padding: 4px 6px; }
  .content-intro { align-items: flex-end; padding: 14px 15px 9px; }
  .content-intro h3 { font-size: .86rem; }
  .content-intro p { overflow: hidden; font-size: .65rem; white-space: nowrap; text-overflow: ellipsis; }
  .content-flow { padding: 0 12px 24px; }
  .content-flow li > button { grid-template-columns: 27px 76px minmax(0,1fr) 29px; gap: 8px; min-height: 91px; padding: 8px 2px; }
  .content-flow figure { height: 68px; border-radius: 19px 19px 19px 8px; }
  .content-flow b { font-size: .73rem; white-space: normal; line-height: 1.45; }
  .content-flow li > button > svg { width: 18px; height: 18px; }
  .content-item-detail { margin: 0 0 13px 27px; padding: 14px; }
  .content-item-detail p { font-size: .67rem; }
  .content-item-detail a { justify-self: stretch; }
  .shop-hero { grid-template-columns: 1fr; height: auto; }
  .shop-hero > img { min-height: 210px; height: 210px; }
  .shop-hero > div { padding: 30px 22px 34px; }
  .shop-hero h3 { font-size: 1.55rem; }
  .shop-primary-link { width: 100%; min-width: 0; }
  .shop-information { padding: 39px 22px 43px; }
  .shop-section-heading h3, .shop-store-copy h3 { font-size: 1.4rem; }
  .shop-purpose-list { margin: 25px 0 30px; }
  .shop-purpose-list li { grid-template-columns: 39px minmax(0,1fr); min-height: 49px; }
  .shop-purpose-list b { font-size: .66rem; line-height: 1.55; }
  .shop-guide-columns { grid-template-columns: 1fr; }
  .shop-guide-columns section { padding: 22px 0; }
  .shop-guide-columns section + section { padding: 22px 0; border-top: 1px solid rgba(66,137,160,.17); border-left: 0; }
  .shop-product-directory > section { grid-template-columns: 1fr; gap: 13px; padding: 25px 0; }
  .shop-product-directory a { justify-self: stretch; }
  .shop-product-links { width: 100%; }
  .shop-order-note { grid-template-columns: 1fr; gap: 9px; padding-top: 25px; }
  .shop-store { grid-template-columns: 1fr; min-height: 0; }
  .shop-store figure { min-height: 280px; height: 280px; }
  .shop-store figure img { min-height: 280px; }
  .shop-store-copy { padding: 38px 22px max(44px, env(safe-area-inset-bottom)); }
  .shop-store dl > div { grid-template-columns: 68px minmax(0,1fr); }
  .shop-store-actions a { flex: 1 1 auto; justify-content: center; }
  .about-sidebar { width: 100%; border: 0; }
  .about-header { grid-template-columns: 40px minmax(0,1fr) 40px; min-height: 72px; padding: max(8px, env(safe-area-inset-top)) 10px 7px; }
  .about-header h2 { overflow: hidden; font-size: 1.05rem; white-space: nowrap; text-overflow: ellipsis; }
  .about-nav { padding: 8px 10px; }
  .about-hero { min-height: 500px; padding: 277px 22px 45px; }
  .about-hero > img { height: 250px; }
  .about-hero h3, .about-copy h3 { font-size: 1.8rem; }
  .about-copy { padding: 48px 22px; }
  .navigator-card { grid-template-columns: 1fr; }
  .navigator-card > img { height: 420px; }
  .navigator-card > div { padding: 35px 22px 48px; }
  .community-card > img { height: 270px; }
  .community-card > div { padding: 34px 22px 50px; }
}

@media (max-width: 370px) {
  .bubble-talk { width: 104px; height: 104px; }
  .bubble-content { width: 98px; height: 98px; }
  .bubble-course { width: 106px; height: 106px; }
  .bubble-community { width: 102px; height: 102px; }
  .bubble-shop { width: 102px; height: 102px; }
  .nav-bubble b { font-size: .82rem; }
  .bubble-course b { font-size: .76rem; }
  .bubble-community b { font-size: .68rem; }
  .content-flow li > button { grid-template-columns: 24px 70px minmax(0,1fr) 25px; gap: 6px; }
}

@media (max-width: 700px) {
  .conversation-header { display: grid; gap: 2px; min-height: 62px; padding: 8px 12px; }
  .conversation-header > div { min-width: 0; }
  .conversation-header h3 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .conversation-header p { padding-left: 20px; }
  .conversation-tools { margin-left: auto; }
  .conversation-tools button { width: 31px; height: 31px; }
  .message-stream { padding-bottom: 10px; }
  .reply-banner { margin: 0 9px 6px; }
  .composer-menu { bottom: calc(70px + env(safe-area-inset-bottom)); left: 9px; width: min(270px, calc(100% - 18px)); }
  .community-drawer { top: 72px; width: 100%; border-left: 0; }
  .community-dialog { border-radius: 24px; }
  .dialog-heading { padding: 28px 20px 14px; }
  .auth-tabs { margin-right: 20px; margin-left: 20px; }
  .community-form { padding: 10px 20px max(24px, env(safe-area-inset-bottom)); }
  .profile-admin { margin-right: 20px; margin-left: 20px; }
  .message-poll { width: 100%; }
  .message-attachment img, .message-attachment video { max-height: 55dvh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}