@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap');
:root {
    --bg:#10101b;
    --surface:#191927;
    --surface-2:#202033;
    --text:#f5f4fb;
    --muted:#a3a2b7;
    --line:rgba(255,255,255,.09);
    --purple:#8b6cff;
    --pink:#ee6da8;
    --gold:#f4c46b;
    --mint:#73e4c3;
    --radius:22px;
    --shadow:0 24px 70px rgba(0,0,0,.22)
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth
}
body {
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:'Cairo',Tahoma,Arial,sans-serif;
    font-size:15px;
    line-height:1.8
}
a {
    color:inherit;
    text-decoration:none
}
button,input,textarea,select {
    font:inherit
}
button,a,input,textarea,select {
    -webkit-tap-highlight-color:transparent
}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible {
    outline:2px solid var(--gold);
    outline-offset:3px
}
.wrap {
    width:min(1180px,calc(100% - 48px));
    margin-inline:auto
}
.site-header {
    height:88px;
    display:flex;
    align-items:center;
    position:relative;
    z-index:5;
    border-bottom:1px solid var(--line);
    background:rgba(16,16,27,.88);
    backdrop-filter:blur(16px)
}
.header-inner {
    display:flex;
    align-items:center;
    gap:40px
}
.brand {
    display:inline-flex;
    align-items:center;
    gap:11px;
    flex-shrink:0
}
.brand-mark {
    width:43px;
    height:43px;
    border-radius:15px;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,var(--purple),var(--pink));
    font-weight:900;
    font-size:23px;
    color:white;
    box-shadow:0 8px 24px #8b6cff33
}
.brand-copy {
    display:flex;
    flex-direction:column;
    line-height:1.3
}
.brand-copy strong {
    font-size:17px;
    letter-spacing:-.3px
}
.brand-copy strong b {
    color:#bdabff
}
.brand-copy small {
    font-size:10px;
    color:var(--muted);
    margin-top:3px
}
.main-nav {
    display:flex;
    gap:28px;
    margin-inline-start:auto
}
.nav-link {
    font-size:13px;
    color:var(--muted);
    transition:color .2s
}
.nav-link:hover,.nav-link:focus {
    color:white
}
.header-actions {
    display:flex;
    align-items:center;
    gap:9px
}
.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border:1px solid transparent;
    border-radius:13px;
    padding:11px 19px;
    cursor:pointer;
    font-weight:700;
    font-size:13px;
    transition:transform .18s,filter .18s,border-color .18s
}
.button:hover {
    transform:translateY(-2px);
    filter:brightness(1.08)
}
.button-primary {
    background:linear-gradient(115deg,#8e6dff,#b06ae8 65%,#e56aa8);
    color:white;
    box-shadow:0 9px 24px #8b6cff26
}
.button-outline {
    border-color:var(--line);
    background:transparent;
    color:var(--text)
}
.button-text {
    color:var(--muted);
    background:transparent
}
.button-glass {
    border-color:rgba(255,255,255,.16);
    background:rgba(255,255,255,.045);
    color:white
}
.button-light {
    background:#fff;
    color:#171522
}
.button-small {
    padding:9px 13px;
    font-size:12px;
    border-radius:11px
}
.button-large {
    padding:14px 22px;
    border-radius:15px
}
.button-full {
    width:100%
}
.user-chip {
    display:flex;
    align-items:center;
    gap:8px;
    color:#e6e3f2;
    font-size:12px
}
.avatar {
    display:inline-grid;
    place-items:center;
    flex-shrink:0;
    width:44px;
    height:44px;
    border-radius:15px;
    background:linear-gradient(135deg,#8b6cff,#ea6ca8);
    font-weight:800;
    color:white
}
.avatar-small {
    width:30px;
    height:30px;
    border-radius:10px;
    font-size:12px
}
.flash {
    margin-top:18px;
    border-radius:12px;
    padding:12px 16px;
    font-size:13px;
    border:1px solid var(--line)
}
.flash-success {
    background:#16372f;
    color:#b1f5d8
}
.flash-warning {
    background:#382e1b;
    color:#ffe2a0
}
.flash-error {
    background:#3b202c;
    color:#ffc1d7
}
.hero-section {
    overflow:hidden;
    position:relative;
    border-bottom:1px solid var(--line);
    background:radial-gradient(ellipse at 76% 45%,#342655 0%,#1c1930 30%,#10101b 68%);
    min-height:510px
}
.hero-grid {
    display:grid;
    grid-template-columns:1.08fr .92fr;
    align-items:center;
    min-height:510px;
    gap:44px;
    position:relative;
    z-index:1
}
.hero-copy {
    padding-block:64px
}
.eyebrow {
    display:inline-flex;
    align-items:center;
    gap:9px;
    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.09);
    padding:6px 12px;
    border-radius:100px;
    font-size:11px;
    color:#e5dcff;
    letter-spacing:.1px
}
.eyebrow-dot {
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--mint);
    box-shadow:0 0 12px #73e4c3
}
.hero-copy h1 {
    font-size:clamp(38px,5vw,62px);
    line-height:1.35;
    letter-spacing:-1.5px;
    margin:23px 0 12px;
    font-weight:900
}
.hero-copy h1 span,.auth-aside h1 span,.page-hero h1 span {
    background:linear-gradient(90deg,#bdaaff,#f098cb);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent
}
.hero-copy>p {
    color:#aaa8bd;
    font-size:15px;
    max-width:490px;
    line-height:2.1;
    margin:0
}
.hero-actions {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:25px
}
.hero-note {
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:25px;
    font-size:11px;
    color:#9492aa
}
.note-icon {
    color:var(--gold);
    font-size:17px
}
.hero-art {
    height:410px;
    position:relative;
    display:grid;
    place-items:center;
    isolation:isolate
}
.hero-glow {
    position:absolute;
    filter:blur(75px);
    border-radius:50%;
    pointer-events:none
}
.hero-glow-one {
    width:300px;
    height:280px;
    right:4%;
    top:16%;
    background:#9257d724
}
.hero-glow-two {
    width:190px;
    height:180px;
    left:9%;
    bottom:0;
    background:#e75e9e15
}
.orbit {
    position:absolute;
    border:1px solid #b69aff22;
    border-radius:50%;
    transform:rotate(-22deg)
}
.orbit-a {
    width:335px;
    height:255px
}
.orbit-b {
    width:420px;
    height:330px;
    transform:rotate(25deg)
}
.hero-orb {
    width:220px;
    height:220px;
    border-radius:50%;
    position:relative;
    display:grid;
    place-items:center;
    background:radial-gradient(circle at 34% 25%,#6e5c99,#29203f 45%,#181725 75%);
    border:1px solid #d6c6ff27;
    box-shadow:inset 0 0 45px #c6a8ff12,0 0 90px #855de32a
}
.orb-ring {
    position:absolute;
    inset:17px;
    border:1px solid #c7b3ff24;
    border-radius:50%
}
.orb-core {
    width:112px;
    height:112px;
    border-radius:35px;
    display:grid;
    place-items:center;
    font-size:65px;
    font-weight:900;
    background:linear-gradient(140deg,#9f7aff,#df6fae);
    box-shadow:0 22px 55px #9b67fa53;
    transform:rotate(-8deg);
    position:relative
}
.orb-core span {
    font-size:21px;
    position:absolute;
    top:2px;
    right:6px;
    color:#ffefb4
}
.orb-star {
    position:absolute;
    color:#e9d9ff
}
.star-one {
    top:28px;
    right:45px;
    font-size:24px
}
.star-two {
    bottom:38px;
    left:30px;
    font-size:30px
}
.floating-card {
    position:absolute;
    z-index:2;
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 15px;
    border-radius:17px;
    background:rgba(31,29,48,.91);
    border:1px solid #fff1;
    box-shadow:0 20px 50px #0003;
    backdrop-filter:blur(12px);
    min-width:220px
}
.floating-card strong,.floating-card small {
    display:block
}
.floating-card strong {
    font-size:12px
}
.floating-card small {
    color:var(--muted);
    font-size:10px;
    margin-top:1px
}
.card-top {
    top:65px;
    right:0;
    transform:rotate(3deg)
}
.card-bottom {
    bottom:57px;
    left:0;
    transform:rotate(-3deg)
}
.mini-icon {
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    flex-shrink:0;
    border-radius:13px;
    font-size:20px
}
.mini-icon.mint {
    background:#73e4c321;
    color:var(--mint)
}
.mini-icon.pink {
    background:#ee6da826;
    color:#ff9ec9
}
.mini-icon.violet {
    background:#8b6cff24;
    color:#c7b5ff
}
.card-dots {
    margin-inline-start:auto;
    color:#9a92b4;
    letter-spacing:2px
}
.online-dot {
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--mint);
    margin-inline-start:auto;
    box-shadow:0 0 10px #73e4c3
}
.decor {
    position:absolute;
    color:#e9c7ff
}
.decor-one {
    right:6%;
    bottom:16%;
    font-size:24px
}
.decor-two {
    left:13%;
    top:20%;
    font-size:34px;
    color:#f29ac7
}
.decor-three {
    right:13%;
    top:15%;
    letter-spacing:5px;
    color:#9880d4
}
.section {
    padding-block:74px
}
.section-heading {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:28px
}
.section-kicker {
    display:block;
    font-size:11px;
    font-weight:800;
    letter-spacing:.4px;
    color:#b5a0ff;
    margin-bottom:5px
}
.section-heading h2,.panel-heading h2 {
    font-size:27px;
    line-height:1.5;
    margin:0;
    font-weight:800
}
.section-heading p,.panel-heading p {
    color:var(--muted);
    font-size:12px;
    margin:3px 0 0
}
.text-link {
    display:inline-flex;
    gap:10px;
    align-items:center;
    color:#c4b2ff;
    font-weight:700;
    font-size:12px;
    white-space:nowrap
}
.text-link span {
    font-size:18px;
    transition:transform .2s
}
.text-link:hover span {
    transform:translateX(-4px)
}
.room-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:17px
}
.room-card {
    border:1px solid var(--line);
    border-radius:19px;
    background:#181824;
    overflow:hidden;
    transition:transform .2s,border-color .2s,box-shadow .2s;
    min-width:0
}
.room-card:hover {
    transform:translateY(-5px);
    border-color:#aa91ff66;
    box-shadow:0 20px 42px #0002
}
.room-cover {
    height:135px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:radial-gradient(circle at 70% 25%,#ffffff22,transparent 24%),linear-gradient(130deg,var(--cover,#6b5ce7),#25203b)
}
.room-cover:before,.room-detail-cover:before {
    content:"";
    position:absolute;
    width:175px;
    height:175px;
    border:1px solid #ffffff25;
    border-radius:50%;
    top:-78px;
    left:-20px;
    box-shadow:0 0 0 23px #ffffff08,0 0 0 48px #ffffff05
}
.cover-symbol {
    font-size:52px;
    font-weight:900;
    color:#fff9;
    text-shadow:0 5px 32px #fff4;
    position:relative
}
.live-pill,.member-pill {
    position:absolute;
    top:11px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 8px;
    border-radius:8px;
    background:#11101cbf;
    color:#f8f7ff;
    font-size:9px;
    backdrop-filter:blur(8px)
}
.live-pill {
    right:10px
}
.live-pill i {
    display:block;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#73e4c3
}
.member-pill {
    left:10px
}
.room-card-body {
    padding:14px
}
.room-card-top {
    display:flex;
    align-items:center;
    justify-content:space-between
}
.category-tag {
    font-size:10px;
    color:#c4b3ff;
    background:#8b6cff1c;
    border:1px solid #8b6cff24;
    display:inline-flex;
    padding:3px 9px;
    border-radius:8px
}
.room-arrow {
    font-size:18px;
    color:#77748f
}
.room-card h3 {
    font-size:15px;
    margin:8px 0 3px;
    overflow-wrap:anywhere
}
.room-card-body>p {
    font-size:11px;
    color:var(--muted);
    margin:0;
    line-height:1.8;
    height:40px;
    overflow:hidden
}
.room-host {
    display:flex;
    align-items:center;
    gap:8px;
    border-top:1px solid var(--line);
    margin-top:12px;
    padding-top:12px;
    font-size:10px;
    color:#bab8ca
}
.setup-notice {
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding:22px;
    border-radius:18px;
    border:1px dashed #8b6cff73;
    background:#8b6cff0c;
    color:#eeebff
}
.notice-icon {
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:14px;
    background:#8b6cff1c;
    color:#bdaaff;
    font-size:21px;
    flex-shrink:0
}
.setup-notice strong {
    font-size:14px
}
.setup-notice p {
    font-size:12px;
    color:#a8a4bf;
    margin:4px 0 0
}
.setup-notice code {
    color:#e5d9ff;
    background:#ffffff0b;
    padding:2px 5px;
    border-radius:4px;
    direction:ltr;
    display:inline-block
}
.empty-state {
    text-align:center;
    border:1px dashed #ffffff21;
    border-radius:22px;
    padding:48px 18px;
    background:#ffffff03
}
.empty-symbol {
    font-size:38px;
    color:#b7a0ff
}
.empty-state h3,.empty-state h2 {
    font-size:20px;
    margin:6px 0
}
.empty-state p {
    color:var(--muted);
    font-size:12px;
    margin:0 0 18px
}
.compact-empty {
    margin-top:18px;
    padding:32px
}
.bottom-cta {
    background:radial-gradient(ellipse at 80% 50%,#41305b,#241c38 50%,#1c192a);
    border-block:1px solid var(--line)
}
.bottom-cta-inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding-block:43px
}
.bottom-cta h2 {
    font-size:30px;
    line-height:1.5;
    margin:0
}
.bottom-cta p {
    color:#b3afc4;
    font-size:12px;
    margin:0
}
.bottom-cta .section-kicker {
    color:#dfc2ff
}
.site-footer {
    border-top:1px solid var(--line);
    background:#0e0e17
}
.footer-inner {
    display:flex;
    align-items:center;
    gap:25px;
    padding-block:24px
}
.footer-brand .brand-mark {
    width:35px;
    height:35px;
    border-radius:12px;
    font-size:18px
}
.footer-brand .brand-copy strong {
    font-size:14px
}
.footer-brand .brand-copy small {
    display:none
}
.footer-inner>p,.footer-copy {
    font-size:10px;
    color:#77758b
}
.footer-copy {
    margin-inline-start:auto
}
.page-hero {
    background:radial-gradient(ellipse at 78% 45%,#362750,#161523 60%,#10101b);
    border-bottom:1px solid var(--line)
}
.page-hero-inner {
    min-height:215px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    padding-block:38px
}
.page-hero h1 {
    font-size:40px;
    margin:0;
    line-height:1.4
}
.page-hero p {
    font-size:13px;
    color:var(--muted);
    margin:4px 0 0
}
.page-hero .button {
    flex-shrink:0
}
.create-room-panel {
    margin-top:48px;
    padding:28px;
    border:1px solid var(--line);
    border-radius:22px;
    background:linear-gradient(135deg,#1a1929,#171722)
}
.panel-heading {
    margin-bottom:21px
}
.create-room-form {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px
}
.create-room-form label,.form-stack label {
    display:flex;
    flex-direction:column;
    gap:7px;
    font-size:12px;
    font-weight:700;
    color:#dfdced
}
.create-room-form input,.create-room-form textarea,.create-room-form select,.form-stack input {
    width:100%;
    color:var(--text);
    background:#10101a;
    border:1px solid #ffffff18;
    border-radius:12px;
    padding:12px 13px;
    min-height:47px;
    outline:none
}
.create-room-form textarea {
    resize:vertical
}
.create-room-form select option {
    background:#191927
}
.create-room-form input:focus,.create-room-form textarea:focus,.create-room-form select:focus,.form-stack input:focus {
    border-color:#a68dff
}
.create-room-form .form-wide {
    grid-column:1/-1
}
.create-room-form button {
    justify-self:start
}
.page-errors {
    margin-bottom:24px
}
.form-errors {
    background:#3c202d;
    border:1px solid #a94a6f66;
    color:#ffe0ea;
    border-radius:12px;
    padding:12px 15px;
    margin-bottom:18px;
    font-size:12px
}
.form-errors ul {
    padding-right:18px;
    margin:6px 0 0
}
.room-detail-section {
    min-height:60vh
}
.back-link {
    margin-bottom:19px
}
.room-detail-cover {
    height:250px;
    border-radius:25px;
    position:relative;
    overflow:hidden;
    background:radial-gradient(circle at 72% 30%,#ffffff20,transparent 30%),linear-gradient(130deg,var(--cover,#6b5ce7),#242039);
    display:grid;
    place-items:center
}
.room-detail-cover .cover-symbol {
    font-size:100px
}
.room-detail-cover .live-pill {
    top:20px;
    right:20px
}
.room-detail-grid {
    display:grid;
    grid-template-columns:minmax(0,1fr) 300px;
    gap:28px;
    margin-top:28px
}
.room-detail-main h1 {
    font-size:34px;
    line-height:1.5;
    margin:9px 0
}
.room-detail-description {
    max-width:750px;
    color:#b7b4c8;
    font-size:13px;
    white-space:pre-line
}
.detail-host {
    margin-top:24px;
    border-top:0;
    padding-top:0;
    font-size:13px
}
.detail-host small {
    display:block;
    color:var(--muted);
    font-size:10px
}
.room-info-panel {
    border:1px solid var(--line);
    border-radius:20px;
    padding:21px;
    background:#181824;
    height:max-content
}
.room-info-panel h3 {
    margin:0 0 16px;
    font-size:16px
}
.info-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 0;
    border-bottom:1px solid var(--line);
    font-size:11px;
    color:var(--muted)
}
.info-row strong {
    color:var(--text);
    font-size:11px
}
.status-dot {
    display:inline-block;
    width:7px;
    height:7px;
    background:var(--mint);
    border-radius:50%;
    margin-left:5px
}
.room-info-panel .button {
    margin-top:20px
}
.feature-coming {
    margin-top:20px;
    background:#8b6cff12;
    border-radius:13px;
    padding:13px
}
.feature-coming>span {
    color:#c1aaff;
    font-size:20px
}
.feature-coming strong {
    display:block;
    font-size:12px
}
.feature-coming p {
    font-size:10px;
    color:var(--muted);
    margin:3px 0 0
}
.auth-section {
    display:grid;
    grid-template-columns:1fr 450px;
    gap:70px;
    align-items:center;
    padding-block:70px;
    min-height:calc(100vh - 170px)
}
.auth-aside {
    padding:30px 0
}
.auth-aside h1 {
    font-size:44px;
    line-height:1.5;
    margin:20px 0 10px;
    letter-spacing:-1px
}
.auth-aside>p {
    color:var(--muted);
    max-width:440px;
    font-size:13px
}
.auth-feature {
    display:flex;
    align-items:center;
    gap:13px;
    margin-top:25px
}
.auth-feature>span {
    width:43px;
    height:43px;
    border-radius:13px;
    display:grid;
    place-items:center;
    color:#c4b2ff;
    background:#8b6cff20;
    font-size:20px
}
.auth-feature strong,.auth-feature small {
    display:block
}
.auth-feature strong {
    font-size:12px
}
.auth-feature small {
    font-size:10px;
    color:var(--muted)
}
.auth-panel {
    padding:31px;
    border:1px solid var(--line);
    border-radius:23px;
    background:linear-gradient(155deg,#1c1b2d,#171722);
    box-shadow:var(--shadow)
}
.auth-panel-heading {
    margin-bottom:23px
}
.auth-panel-heading h2 {
    font-size:24px;
    margin:0
}
.auth-panel-heading p {
    font-size:11px;
    color:var(--muted);
    margin:4px 0 0
}
.form-stack {
    display:flex;
    flex-direction:column;
    gap:14px
}
.form-stack label {
    gap:6px
}
.form-stack input {
    height:46px
}
.form-stack label small {
    font-size:10px;
    color:var(--muted);
    font-weight:400
}
.form-stack button {
    margin-top:7px
}
.auth-switch {
    text-align:center;
    color:var(--muted);
    font-size:11px;
    margin:20px 0 0
}
.auth-switch a {
    color:#c5b3ff;
    font-weight:800
}
.auth-quote {
    margin-top:35px;
    max-width:420px;
    padding:20px 23px;
    background:#ffffff05;
    border:1px solid var(--line);
    border-radius:16px
}
.auth-quote span {
    font-size:45px;
    color:#b9a3ff;
    line-height:1
}
.auth-quote p {
    color:#d0ccdf;
    margin:0;
    font-size:13px
}
.profile-section>h1 {
    font-size:37px;
    margin:0 0 25px
}
.profile-card {
    display:flex;
    align-items:center;
    gap:20px;
    padding:25px;
    border-radius:22px;
    background:linear-gradient(110deg,#211d35,#191824);
    border:1px solid var(--line)
}
.profile-avatar {
    width:84px;
    height:84px;
    border-radius:26px;
    background:linear-gradient(145deg,#9f7aff,#e66aa8);
    display:grid;
    place-items:center;
    font-size:38px;
    font-weight:900;
    box-shadow:0 12px 35px #8b6cff29
}
.profile-main h2 {
    font-size:21px;
    margin:0
}
.profile-main p {
    direction:ltr;
    text-align:right;
    color:var(--muted);
    font-size:11px;
    margin:0 0 7px
}
.role-tag {
    display:inline-block;
    padding:3px 9px;
    border:1px solid #8b6cff36;
    background:#8b6cff18;
    color:#cdbfff;
    border-radius:7px;
    font-size:9px
}
.profile-stats {
    display:flex;
    gap:30px;
    margin-inline-start:auto
}
.profile-stats div {
    display:flex;
    flex-direction:column;
    align-items:center
}
.profile-stats strong {
    font-size:24px
}
.profile-stats span {
    color:var(--muted);
    font-size:10px
}
.profile-rooms-heading {
    margin-top:42px
}
.owned-room-list {
    border:1px solid var(--line);
    border-radius:18px;
    overflow:hidden
}
.owned-room-row {
    display:flex;
    align-items:center;
    gap:13px;
    padding:14px 18px;
    border-bottom:1px solid var(--line)
}
.owned-room-row:last-child {
    border-bottom:0
}
.owned-room-row:hover {
    background:#ffffff05
}
.owned-room-text {
    display:flex;
    flex-direction:column;
    flex:1
}
.owned-room-text strong {
    font-size:12px
}
.owned-room-text small {
    font-size:10px;
    color:var(--muted)
}
@media(max-width:1000px) {
    .wrap {
        width:min(100% - 36px,850px)
    }
    .header-inner {
        gap:22px
    }
    .main-nav {
        gap:17px
    }
    .hero-grid {
        gap:15px;
        grid-template-columns:1fr .85fr
    }
    .hero-copy h1 {
        font-size:47px
    }
    .hero-art {
        transform:scale(.88);
        margin-inline:-25px
    }
    .room-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .auth-section {
        grid-template-columns:1fr 420px;
        gap:35px
    }
    .auth-aside h1 {
        font-size:37px
    }
}
@media(max-width:700px) {
    .wrap {
        width:calc(100% - 30px)
    }
    .site-header {
        height:auto;
        min-height:72px
    }
    .header-inner {
        flex-wrap:wrap;
        gap:10px;
        padding-block:12px
    }
    .brand-mark {
        width:38px;
        height:38px
    }
    .brand-copy strong {
        font-size:15px
    }
    .main-nav {
        order:3;
        flex-basis:100%;
        justify-content:center;
        border-top:1px solid var(--line);
        padding-top:9px;
        gap:30px;
        margin:0
    }
    .header-actions {
        margin-inline-start:auto
    }
    .header-actions .user-chip>span:last-child {
        display:none
    }
    .header-actions .button-small {
        font-size:10px;
        padding:7px 9px
    }
    .hero-section,.hero-grid {
        min-height:auto
    }
    .hero-grid {
        grid-template-columns:1fr;
        gap:0
    }
    .hero-copy {
        padding:53px 0 0
    }
    .hero-copy h1 {
        font-size:42px;
        margin-top:17px
    }
    .hero-copy>p {
        font-size:13px
    }
    .hero-art {
        height:310px;
        transform:scale(.82);
        margin:-5px -20px 0
    }
    .card-top {
        right:2%
    }
    .card-bottom {
        left:2%
    }
    .section {
        padding-block:48px
    }
    .section-heading {
        align-items:flex-start;
        flex-direction:column;
        gap:12px
    }
    .section-heading h2,.panel-heading h2 {
        font-size:23px
    }
    .section-heading p {
        font-size:11px
    }
    .room-grid {
        gap:11px
    }
    .room-cover {
        height:110px
    }
    .room-card-body {
        padding:10px
    }
    .room-card h3 {
        font-size:13px
    }
    .room-card-body>p {
        height:38px;
        font-size:10px
    }
    .room-host {
        font-size:9px
    }
    .room-host .avatar {
        width:26px;
        height:26px
    }
    .bottom-cta-inner {
        padding-block:30px;
        align-items:flex-start;
        flex-direction:column
    }
    .bottom-cta h2 {
        font-size:25px
    }
    .footer-inner {
        flex-wrap:wrap;
        gap:12px
    }
    .footer-inner>p {
        order:3;
        flex-basis:100%;
        margin:0
    }
    .footer-copy {
        font-size:9px
    }
    .page-hero-inner {
        min-height:190px;
        align-items:flex-start;
        flex-direction:column;
        justify-content:center
    }
    .page-hero h1 {
        font-size:34px
    }
    .page-hero p {
        font-size:11px
    }
    .create-room-panel {
        padding:18px
    }
    .create-room-form {
        grid-template-columns:1fr;
        gap:13px
    }
    .create-room-form .form-wide {
        grid-column:auto
    }
    .create-room-form button {
        width:100%
    }
    .room-detail-cover {
        height:185px
    }
    .room-detail-grid {
        grid-template-columns:1fr;
        gap:20px
    }
    .room-detail-main h1 {
        font-size:27px
    }
    .room-info-panel {
        padding:17px
    }
    .auth-section {
        grid-template-columns:1fr;
        gap:10px;
        padding-block:35px;
        min-height:auto
    }
    .auth-aside {
        padding:5px 0 14px
    }
    .auth-aside h1 {
        font-size:34px;
        margin:12px 0
    }
    .auth-aside>p {
        font-size:12px
    }
    .auth-feature {
        margin-top:14px
    }
    .auth-feature>span {
        width:36px;
        height:36px
    }
    .auth-panel {
        padding:22px 18px
    }
    .auth-panel-heading h2 {
        font-size:21px
    }
    .auth-quote {
        margin-top:20px
    }
    .auth-section-login {
        padding-top:42px
    }
    .profile-section>h1 {
        font-size:30px
    }
    .profile-card {
        align-items:flex-start;
        flex-wrap:wrap;
        gap:14px;
        padding:18px
    }
    .profile-avatar {
        width:63px;
        height:63px;
        border-radius:21px;
        font-size:29px
    }
    .profile-main h2 {
        font-size:17px
    }
    .profile-stats {
        flex-basis:100%;
        justify-content:flex-start;
        gap:35px;
        margin:8px 0 0;
        border-top:1px solid var(--line);
        padding-top:15px
    }
    .profile-rooms-heading {
        margin-top:30px;
        flex-direction:row;
        align-items:center
    }
    .profile-rooms-heading .button {
        padding:9px 11px;
        font-size:10px
    }
    .owned-room-row {
        padding:12px;
        gap:8px
    }
    .role-tag {
        font-size:8px
    }
}
@media(max-width:390px) {
    .hero-copy h1 {
        font-size:36px
    }
    .hero-actions .button {
        flex:1;
        padding-inline:12px
    }
    .room-grid {
        grid-template-columns:1fr
    }
    .room-cover {
        height:135px
    }
    .room-card-body {
        padding:14px
    }
    .room-card-body>p {
        height:auto;
        min-height:35px
    }
    .card-top,.card-bottom {
        min-width:200px
    }
    .auth-panel {
        padding-inline:15px
    }
}