/* Static website prototype. No engine, authentication or network integration. */
:root {
  --bg:#0b1013;
  --panel:#141a1f;
  --panel-2:#20272e;
  --field:#20272d;
  --line:#343c44;
  --line-soft:#252d34;
  --text:#f2f3f5;
  --text-2:#c9ced5;
  --muted:#909aa8;
  --red:#fa3039;
  --red-hi:#ff3b42;
  --green:#37d6a0;
  --yellow:#efb342;
  --radius:5px;
  --hero-art:url('../img/battlefield-hero.jpg');
  color-scheme:dark;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:14px/1.55 'PingFang SC','Microsoft YaHei',sans-serif;
  -webkit-font-smoothing:antialiased;
}

a {
  color:inherit;
  text-decoration:none;
}

h1,h2,h3,p {
  margin:0;
}

button,input,select {
  font:inherit;
  color:inherit;
}

button,a,input,select,summary {
  -webkit-tap-highlight-color:transparent;
}

button,a {
  touch-action:manipulation;
}

button {
  cursor:pointer;
}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {
  outline:2px solid #ff656b;
  outline-offset:4px;
}

.muted {
  color:var(--muted);
}

.num {
  font-variant-numeric:tabular-nums;
}

.icon {
  width:20px;
  height:20px;
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.icon-sm {
  width:15px;
  height:15px;
}

.icon-lg {
  width:36px;
  height:36px;
  stroke-width:1.5;
}

.logo {
  font-family:Arial,'Arial Black',sans-serif;
  font-size:27px;
  font-weight:1000;
  letter-spacing:-1px;
  line-height:1;
  white-space:nowrap;
}

.logo span {
  color:var(--red);
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:38px;
  padding:0 19px;
  border:1px solid transparent;
  border-radius:5px;
  background:none;
  color:#fff;
  font-weight:600;
  white-space:nowrap;
  cursor:pointer;
  transition:background .15s,border-color .15s;
}

.btn-primary {
  background:linear-gradient(180deg,#ff3c44,#f12631);
  box-shadow:inset 0 1px 0 #ff6d7155;
}

.btn-primary:hover {
  background:#ff4a52;
}

.btn-ghost {
  background:linear-gradient(180deg,#2a3038,#20262d);
  border-color:#3b444e;
}

.btn-ghost:hover {
  background:#343c45;
  border-color:#69717a;
}

.btn-lg {
  height:52px;
  padding:0 34px;
  font-size:16px;
}

.btn-sm {
  min-height:29px;
  padding:0 17px;
  font-size:12px;
}

.btn-block {
  width:100%;
}

.icon-btn {
  width:38px;
  height:38px;
  display:inline-grid;
  place-items:center;
  flex:none;
  border:1px solid var(--line);
  border-radius:5px;
  background:linear-gradient(#293139,#1d242a);
  color:var(--text-2);
}

.icon-btn.plain {
  background:none;
  border-color:transparent;
}

.icon-btn:hover {
  color:#fff;
  border-color:#6b737d;
}

.icon-btn.sm {
  width:29px;
  height:29px;
}

.icon-btn.danger {
  color:#ff726d;
}

.field {
  display:grid;
  gap:7px;
}

.field>label {
  font-size:13px;
}

.input {
  display:flex;
  align-items:center;
  gap:10px;
  height:42px;
  padding:0 12px;
  background:linear-gradient(110deg,#242c33,#1c2329);
  border:1px solid #3b444e;
  border-radius:5px;
  color:var(--text-2);
}

.input:focus-within {
  border-color:var(--red);
}

.input input {
  width:100%;
  min-width:0;
  border:0;
  outline:0;
  background:none;
  color:var(--text);
}

.input input::placeholder {
  color:#88919d;
}

.input.compact {
  height:38px;
}

.select {
  height:38px;
  padding:0 35px 0 13px;
  border:1px solid #3b444e;
  border-radius:5px;
  background:#222a31 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9ced5' stroke-width='1.5'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 10px center/14px;
  appearance:none;
  cursor:pointer;
}

.select.sm {
  height:30px;
  padding:0 27px 0 12px;
  font-size:12px;
  background-position:right 6px center;
}

.check {
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--text-2);
  cursor:pointer;
}

.check input {
  appearance:none;
  width:15px;
  height:15px;
  border:1px solid #7c8690;
  border-radius:2px;
  margin:0;
}

.check input:checked {
  background:var(--red);
  box-shadow:inset 0 0 0 3px var(--panel);
}

.card {
  background:linear-gradient(120deg,#141b20,#0d1216);
  border:1px solid var(--line-soft);
  border-radius:5px;
}

.dot {
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green);
  flex:none;
}

.avatar {
  display:inline-grid;
  place-items:center;
  width:31px;
  height:31px;
  flex:none;
  border-radius:50%;
  background:radial-gradient(circle at 50% 32%,#c2c8cc 0 21%,transparent 23%),radial-gradient(ellipse at 50% 108%,#9ca5ad 0 45%,transparent 47%),linear-gradient(#434e59,#252d34);
  border:1px solid #737e88;
  font-size:0;
}

.avatar.lg {
  width:38px;
  height:38px;
}

.avatar.red {
  box-shadow:inset 0 -4px 0 #ba4c47;
}

.avatar.blue {
  box-shadow:inset 0 -4px 0 #478b9f;
}

.avatar.purple {
  box-shadow:inset 0 -4px 0 #7c6d9b;
}

.tag {
  font-size:10px;
  color:var(--muted);
}

/* Public homepage */
.topbar {
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:10;
  height:64px;
  display:flex;
  align-items:center;
  gap:44px;
  padding:0 max(4vw,24px);
  background:linear-gradient(90deg,#101014ee,#10151bd9);
  border-bottom:1px solid #ffffff0d;
}

.nav {
  display:flex;
  align-self:stretch;
  gap:23px;
}

.nav a {
  position:relative;
  display:flex;
  align-items:center;
  color:#d1d1d7;
  font-size:13px;
}

.nav a:hover,.nav a.active {
  color:var(--red);
}

.nav a.active:after {
  position:absolute;
  content:'';
  height:2px;
  background:var(--red);
  bottom:0;
  left:0;
  right:0;
}

.topbar-actions {
  display:flex;
  align-items:center;
  gap:9px;
  margin-left:auto;
}

.topbar-actions .icon-btn {
  width:27px;
}

.topbar .btn-sm {
  min-height:30px;
  padding:0 15px;
}

.hero {
  position:relative;
  isolation:isolate;
  min-height:760px;
  height:100svh;
  max-height:1100px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:clamp(150px,22vh,220px) 4vw 28px;
  background:var(--hero-art) center 45%/cover no-repeat,#27171b;
}

.hero:before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,#090c1110 10%,#080c1225 44%,#070d11e6 77%,#070c10 100%),radial-gradient(ellipse at 50% 40%,#06090d66,transparent 65%);
}

.hero-title {
  font-family:Arial,'Arial Black',sans-serif;
  font-size:clamp(76px,9vw,144px);
  line-height:.95;
  font-weight:1000;
  letter-spacing:-6px;
  text-shadow:0 5px 20px #0008;
}

.hero-title span {
  color:#ed2832;
}

.hero-tagline {
  margin-top:12px;
  font-size:clamp(24px,2.8vw,38px);
  font-weight:800;
  letter-spacing:3px;
  text-shadow:0 3px 8px #000;
}

.hero-desc {
  margin-top:18px;
  font-size:17px;
  line-height:1.8;
  color:#e4e4e7;
  text-shadow:0 2px 5px #000;
}

.hero-actions {
  display:flex;
  justify-content:center;
  gap:18px;
  margin-top:26px;
}

.hero-actions .btn {
  min-width:208px;
}

.hero-actions .btn-ghost {
  background:#10141cb3;
  border:1px solid #c1c3c8;
}

.hero-panel {
  width:100%;
  max-width:1240px;
  margin-top:auto;
  padding-top:38px;
  text-align:left;
}

.features {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  padding:20px 10px 27px;
}

.feature {
  display:flex;
  align-items:center;
  gap:17px;
}

.feature h3 {
  font-size:17px;
}

.feature p {
  color:#a5aab5;
  font-size:12px;
  margin-top:4px;
}

.stats {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid #78829044;
  padding-top:22px;
}

.stat {
  position:relative;
  text-align:center;
}

.stat+.stat:before {
  content:'';
  height:37px;
  width:1px;
  background:#78829033;
  position:absolute;
  left:0;
  top:6px;
}

.stat strong {
  display:block;
  font-family:Arial,sans-serif;
  font-size:27px;
  line-height:1.3;
}

.stat span {
  color:#abb1bd;
  font-size:12px;
}

.scroll-cue {
  position:absolute;
  bottom:13px;
  left:calc(50% - 12px);
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  border:1px solid #7d8796;
  border-radius:50%;
  background:#0b1017;
}

.scroll-cue .icon {
  width:14px;
}

.demo-note {
  font-size:11px;
  color:var(--muted);
  font-weight:400;
}

.hero>.demo-note {
  position:absolute;
  bottom:6px;
  right:18px;
  opacity:.7;
}

.section {
  max-width:1240px;
  padding:62px 24px 0;
  margin:0 auto;
}

.section-head {
  margin-bottom:22px;
}

.section-head h2 {
  font-size:25px;
}

.section-head h2:before {
  content:'';
  display:inline-block;
  width:3px;
  height:22px;
  background:var(--red);
  margin-right:13px;
  vertical-align:-3px;
}

.steps,.platforms {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.step {
  position:relative;
  padding:25px;
}

.step-num {
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border:1px solid #a5363e;
  background:#492027;
  border-radius:50%;
  color:#ff636b;
  font-weight:700;
  font-size:18px;
  margin-bottom:17px;
}

.step>.icon {
  position:absolute;
  right:25px;
  top:28px;
  color:#687582;
}

.step h3 {
  font-size:17px;
  margin-bottom:7px;
}

.step p {
  font-size:13px;
  color:var(--muted);
}

.platform {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  padding:25px;
}

.platform>.icon {
  width:33px;
  height:33px;
  margin-bottom:8px;
}

.platform h3 {
  font-size:18px;
}

.platform p {
  color:var(--muted);
  font-size:12px;
  margin-bottom:10px;
}

.platforms-note {
  text-align:center;
  margin-top:15px;
  color:var(--muted);
  font-size:12px;
}

.platforms-note a {
  color:#ff646b;
}

.split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.split>.card {
  padding:24px;
}

.split h2 {
  font-size:18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px;
}

.split h2 a {
  font-size:12px;
  font-weight:400;
  color:#ff646b;
}

.news {
  list-style:none;
  padding:0;
  margin:0;
}

.news li {
  display:grid;
  grid-template-columns:55px 85px 1fr;
  gap:8px;
  padding:12px 0;
  border-top:1px solid var(--line-soft);
  font-size:12px;
}

.news time {
  color:var(--muted);
}

.version {
  color:#ff646b;
}

.faq details {
  border-top:1px solid var(--line-soft);
  font-size:13px;
}

.faq summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  list-style:none;
  padding:11px 0;
}

.faq summary::-webkit-details-marker {
  display:none;
}

.faq details p {
  color:var(--muted);
  padding-bottom:12px;
}

.site-footer {
  max-width:1192px;
  margin:60px auto 0;
  padding:25px 0 35px;
  border-top:1px solid var(--line-soft);
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:12px;
  color:var(--muted);
}

.site-footer nav {
  display:flex;
  gap:20px;
}

/* Account entry */
.auth {
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-columns:1fr 430px;
  align-items:center;
  gap:8vw;
  padding:90px 11vw 45px 7vw;
  background:linear-gradient(90deg,#0b11193d,#09122260),url('../img/battlefield-login.jpg') 70% center/cover no-repeat,#13202e;
}

.auth:before {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,#09142560,transparent 50%,#080e1780);
}

.auth>.logo {
  position:absolute;
  top:35px;
  left:5vw;
  font-size:34px;
  z-index:1;
}

.perks {
  position:relative;
  display:grid;
  gap:45px;
  max-width:390px;
}

.perk {
  display:flex;
  gap:23px;
  align-items:center;
  text-shadow:0 2px 6px #000;
}

.perk-icon {
  display:grid;
  place-items:center;
  width:60px;
  height:60px;
  flex:none;
  border-radius:50%;
  background:#e5cad329;
  border:1px solid #ffffff1a;
  backdrop-filter:blur(4px);
}

.perk-icon .icon {
  width:31px;
  height:31px;
}

.perk h3 {
  font-size:18px;
}

.perk p {
  margin-top:4px;
  color:#d2d2da;
  font-size:14px;
}

.auth-card {
  position:relative;
  padding:32px 30px 25px;
  background:linear-gradient(130deg,#182027f5,#10161cf5);
  border:1px solid #36404a;
  border-radius:6px;
  box-shadow:0 15px 50px #0006;
}

.auth-card h1 {
  text-align:center;
  font-size:29px;
}

.auth-card .sub {
  text-align:center;
  color:#bfc5ce;
  font-size:13px;
  margin-top:3px;
}

.seg {
  display:grid;
  grid-template-columns:1fr 1fr;
  border:1px solid var(--line-soft);
  background:#10161d88;
  border-radius:4px;
  margin:21px 0 18px;
}

.seg a {
  text-align:center;
  padding:10px 0;
  border-bottom:2px solid transparent;
  color:#c5ccd5;
  font-size:13px;
}

.seg a.active {
  border-color:var(--red);
  color:white;
}

.auth-form {
  display:grid;
  gap:14px;
}

.row-between {
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:12px;
}

.row-between a,.auth-foot a {
  color:#ff454f;
}

.auth-form .btn-lg {
  height:44px;
  font-size:15px;
}

.divider-text {
  display:flex;
  align-items:center;
  gap:13px;
  color:#98a2ad;
  font-size:12px;
  margin:23px 0 14px;
}

.divider-text:before,.divider-text:after {
  content:'';
  height:1px;
  flex:1;
  background:var(--line);
}

.oauth {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.oauth .btn {
  font-weight:400;
  height:41px;
}

.auth-foot {
  text-align:center;
  font-size:13px;
  color:#b2bcc8;
  margin-top:22px;
}

.auth>.demo-note {
  position:absolute;
  bottom:20px;
  left:0;
  right:0;
  text-align:center;
  color:#c8ced6;
}

/* Shared game frontend */
.app {
  display:grid;
  grid-template-columns:208px minmax(0,1fr);
  grid-template-rows:58px 1fr;
  height:100svh;
  min-height:650px;
  background:radial-gradient(ellipse at 60% 20%,#1b252b88,transparent 65%),#0c1216;
}

.app.no-side {
  grid-template-columns:1fr;
}

.app-header {
  grid-column:1/-1;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 22px;
  border-bottom:1px solid var(--line-soft);
  background:linear-gradient(110deg,#181d24,#222a32 80%,#151c23);
}

.app-header .logo {
  margin-right:auto;
  font-size:25px;
}

.header-user {
  display:flex;
  align-items:center;
  gap:8px;
}

.header-user .avatar {
  width:29px;
  height:29px;
}

.sidebar {
  display:flex;
  flex-direction:column;
  gap:20px;
  padding:23px 12px 14px;
  background:linear-gradient(130deg,#181e25,#10171c);
  border-right:1px solid #343b4355;
}

.side-nav {
  display:grid;
  gap:11px;
}

.side-nav a {
  display:flex;
  align-items:center;
  gap:17px;
  padding:12px 17px;
  color:#c0c8d4;
  border:1px solid transparent;
  border-radius:5px;
}

.side-nav a:hover {
  background:#ffffff08;
}

.side-nav a.active {
  background:linear-gradient(100deg,#76292e,#842d32);
  border-color:#a24448;
  color:#fff;
}

.side-user {
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:auto;
  background:#242d35;
  padding:10px;
  border:1px solid #454f59;
  border-radius:5px;
}

.side-user strong {
  font-size:12px;
  font-weight:400;
  display:block;
}

.side-user small {
  font-size:10px;
  color:var(--green);
  display:flex;
  align-items:center;
  gap:4px;
}

.side-user small .dot {
  width:4px;
  height:4px;
}

.side-user>.icon {
  margin-left:auto;
}

.main {
  min-width:0;
  overflow:auto;
  padding:26px 30px 22px;
}

.page-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-bottom:21px;
}

.page-head h1 {
  font-size:28px;
}

.page-head p {
  font-size:13px;
  color:#b0bac6;
  margin-top:1px;
}

.page-head-actions {
  display:flex;
  align-items:center;
  gap:25px;
}

.online {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  white-space:nowrap;
}

.online b {
  font-size:15px;
  font-weight:500;
}

.tabs {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);
  border-radius:5px;
  background:linear-gradient(#222a31,#181f25);
  margin-bottom:16px;
  overflow:hidden;
}

.tabs a {
  text-align:center;
  padding:9px 5px;
  color:#b7c0cc;
  font-size:13px;
  border:1px solid transparent;
  border-right-color:var(--line);
}

.tabs a:last-child {
  border-right-color:transparent;
}

.tabs a.active {
  border:1px solid var(--red);
  border-radius:4px;
  background:linear-gradient(120deg,#4d2228,#201c22);
  color:white;
}

.toolbar {
  display:flex;
  gap:12px;
  margin-bottom:17px;
}

.toolbar .input {
  flex:1;
}

.toolbar .select {
  min-width:155px;
}

.table-wrap {
  border:1px solid var(--line);
  border-radius:5px;
  overflow:auto;
  background:#12191f;
}

.table {
  width:100%;
  min-width:730px;
  border-collapse:collapse;
  font-size:13px;
}

.table th {
  text-align:left;
  padding:11px 14px;
  font-size:12px;
  font-weight:400;
  color:#bfc8d4;
  background:#151c22;
  white-space:nowrap;
}

.table td {
  padding:9px 14px;
  white-space:nowrap;
}

.table tbody tr:nth-child(odd) {
  background:#232b32;
}

.table tbody tr:nth-child(even) {
  background:#171f25;
}

.table tbody tr:hover {
  background:#303940;
}

.table .end {
  text-align:right;
}

.cell {
  display:flex;
  align-items:center;
  gap:9px;
}

.room-lock {
  color:#ff4a4d;
  fill:#ff4a4d;
  stroke:none;
}

.room-lock.none {
  color:#c9ced5;
  fill:none;
  stroke:currentColor;
}

.state-playing {
  color:#ff535b;
}

.state-waiting {
  color:#c7ced9;
}

.ping {
  font-size:12px;
}

.ping.good {
  color:var(--green);
}

.ping.fair {
  color:var(--green);
}

.table-foot {
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
  font-size:11px;
  color:#7c8997;
}

/* Room and player slots */
.no-side .main {
  padding:20px 25px;
}

.room-head {
  display:flex;
  align-items:center;
  gap:17px;
  padding:0 0 18px;
  margin-bottom:0;
  border:0;
  background:none;
}

.room-head-icon {
  display:grid;
  place-items:center;
  width:43px;
  height:43px;
  border:1px solid #414b55;
  border-radius:5px;
  background:#1e272f;
}

.room-head h1 {
  font-size:23px;
}

.room-head p {
  font-size:12px;
  color:#b1bac6;
  margin-top:4px;
}

.room-head .actions {
  display:flex;
  gap:11px;
  margin-left:auto;
}

.room-head .actions>a {
  font-size:12px;
  padding:0 10px;
  color:#aeb8c4;
  background:none;
  border-color:transparent;
}

.no-side .table {
  min-width:720px;
}

.no-side .table td {
  padding:7px 14px;
}

.no-side .table th {
  padding:10px 14px;
}

.faction {
  display:inline-flex;
  align-items:center;
  gap:9px;
}

.emblem {
  display:inline-grid;
  place-items:center;
  width:25px;
  height:26px;
  border-radius:4px;
  background:#27323e;
  font-size:20px;
  font-weight:800;
}

.emblem .icon {
  width:20px;
  height:20px;
}

.emblem.soviet {
  color:#f45c4b;
}

.emblem.allied {
  color:#8bb9ff;
}

.emblem.yuri {
  color:#c27feb;
}

.emblem.random {
  color:#ddd;
}

.swatch {
  display:inline-grid;
  place-items:center;
  width:26px;
  height:26px;
  border:1px solid #ffffff40;
  border-radius:3px;
  font-weight:700;
  vertical-align:middle;
}

.swatch.random {
  background:#e9edf0;
  color:#151b22;
}

.badge {
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:27px;
  padding:0 11px;
  border-radius:4px;
  font-size:12px;
}

.badge:before {
  content:'';
  width:7px;
  height:7px;
  border-radius:50%;
  background:currentColor;
}

.badge .icon {
  display:none;
}

.badge.ready {
  background:#17332c;
  color:#45d6a2;
}

.badge.pending {
  background:#3b2d15;
  color:#ecb039;
}

.badge.idle {
  color:#adb9c8;
  background:#20272f;
}

.ops {
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}

.ops .select {
  width:77px;
}

.room-bottom {
  display:grid;
  grid-template-columns:1.08fr 1fr;
  gap:16px;
  margin-top:15px;
}

.map-card {
  display:flex;
  align-items:flex-start;
  gap:22px;
  padding:12px;
  min-width:0;
}

.map-card img {
  width:46%;
  height:178px;
  object-fit:cover;
  border:1px solid #7c8b99;
  border-radius:4px;
}

.map-card h2 {
  font-size:17px;
  margin:4px 0 8px;
}

.map-card dl {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:5px 8px;
  margin:0;
  font-size:12px;
}

.map-card dt {
  color:#bfc7d0;
}

.map-card dd {
  margin:0;
}

.map-card .btn {
  margin-top:12px;
  min-height:27px;
  font-size:11px;
}

.chat {
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:204px;
}

.chat-tabs {
  display:flex;
  background:linear-gradient(#20282f,#151d23);
  border-bottom:1px solid var(--line-soft);
}

.chat-tabs a {
  flex:1;
  text-align:center;
  padding:9px;
  font-size:12px;
  border-bottom:2px solid transparent;
  color:#b9c3d0;
}

.chat-tabs a.active {
  color:#fff;
  border-color:var(--red);
  background:#0f161c;
}

.chat-log {
  flex:1;
  padding:9px 12px;
  font-size:11px;
  line-height:1.65;
  max-height:155px;
  overflow:auto;
}

.chat-log time {
  margin-right:6px;
  color:#a3aeba;
}

.chat-log b {
  font-weight:400;
  margin-right:4px;
}

.chat-log .sys {
  color:var(--muted);
}

.name-red {
  color:#ff8c81;
}

.name-blue {
  color:#7cb8e5;
}

.name-purple {
  color:#ca9aea;
}

.name-amber {
  color:#7cb8e5;
}

.chat-input {
  display:flex;
  gap:9px;
  padding:8px;
}

.chat-input .input {
  flex:1;
  height:34px;
  font-size:12px;
}

.chat-input .btn {
  height:34px;
  min-height:34px;
  width:38px;
  padding:0;
}

.prototype-toast {
  position:fixed;
  z-index:100;
  left:50%;
  bottom:28px;
  transform:translateX(-50%);
  padding:12px 22px;
  border:1px solid #6e7883;
  border-radius:5px;
  background:#202a33;
  box-shadow:0 8px 30px #0008;
  color:#fff;
  font-size:13px;
  max-width:calc(100% - 32px);
  text-align:center;
}

.prototype-toast[hidden] {
  display:none;
}

@media(min-width:1500px) {
  .main {
    padding:35px 4vw;
  }
  .table td {
    padding-top:13px;
    padding-bottom:13px;
  }
  .no-side .main {
    max-width:1400px;
    width:100%;
    margin:auto;
  }
  .no-side .table td {
    padding-top:10px;
    padding-bottom:10px;
  }
  .room-bottom .map-card img {
    height:210px;
  }
}

@media(max-width:1100px) {
  .topbar {
    gap:28px;
    padding:0 24px;
  }
  .nav {
    gap:15px;
  }
  .topbar .logo {
    font-size:23px;
  }
  .topbar-actions {
    gap:5px;
  }
  .app {
    grid-template-columns:180px 1fr;
  }
  .main {
    padding:22px;
  }
  .page-head-actions {
    gap:12px;
  }
  .online {
    font-size:11px;
  }
  .toolbar .select {
    min-width:115px;
  }
  .room-head h1 {
    font-size:20px;
  }
  .room-head .actions>a {
    display:none;
  }
  .map-card {
    gap:14px;
  }
  .map-card img {
    height:160px;
  }
  .auth {
    grid-template-columns:1fr 400px;
    gap:40px;
    padding-right:6vw;
  }
  .perk h3 {
    font-size:16px;
  }
  .perk p {
    font-size:12px;
  }
  .features {
    gap:16px;
  }
  .feature {
    gap:10px;
  }
  .feature h3 {
    font-size:15px;
  }
  .feature p {
    font-size:11px;
  }
}

@media(max-width:800px) {
  .nav {
    gap:16px;
  }
  .nav a:nth-child(n+4) {
    display:none;
  }
  .topbar-actions>.icon-btn {
    display:none;
  }
  .hero {
    min-height:800px;
    max-height:none;
    height:100svh;
    padding-top:170px;
  }
  .hero-title {
    font-size:90px;
  }
  .hero-panel {
    padding-top:40px;
  }
  .features {
    grid-template-columns:1fr;
    gap:20px;
    padding:25px 0;
  }
  .feature h3 {
    font-size:15px;
  }
  .feature p {
    font-size:11px;
  }
  .stats {
    padding:20px 0 15px;
  }
  .stat strong {
    font-size:23px;
  }
  .hero>.demo-note {
    bottom:2px;
    font-size:9px;
  }
  .auth {
    grid-template-columns:1fr 360px;
    gap:25px;
    padding:110px 5vw 60px;
  }
  .perks {
    gap:30px;
  }
  .perk {
    gap:12px;
  }
  .perk-icon {
    width:44px;
    height:44px;
  }
  .perk h3 {
    font-size:14px;
  }
  .perk p {
    font-size:11px;
  }
  .auth-card {
    padding:26px 24px;
  }
  .app {
    grid-template-columns:150px 1fr;
  }
  .sidebar {
    padding:20px 8px 12px;
  }
  .side-nav a {
    padding:11px 12px;
    gap:12px;
    font-size:12px;
  }
  .side-user {
    gap:7px;
    padding:8px;
  }
  .side-user .avatar {
    width:28px;
    height:28px;
  }
  .side-user strong {
    font-size:11px;
  }
  .main {
    padding:20px 16px;
  }
  .page-head {
    align-items:flex-start;
  }
  .page-head h1 {
    font-size:24px;
  }
  .page-head-actions .online {
    display:none;
  }
  .page-head-actions .btn {
    padding:0 12px;
  }
  .page-head p {
    font-size:11px;
  }
  .toolbar {
    flex-wrap:wrap;
    gap:8px;
  }
  .toolbar .input {
    flex-basis:100%;
  }
  .toolbar .select {
    flex:1;
    min-width:0;
  }
  .room-bottom {
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .map-card {
    flex-direction:column;
    gap:6px;
  }
  .map-card img {
    width:100%;
    height:130px;
  }
  .map-card dl {
    font-size:11px;
  }
  .room-head {
    flex-wrap:wrap;
    gap:12px;
  }
  .room-head h1 {
    font-size:18px;
  }
  .room-head .actions {
    margin-left:auto;
  }
  .room-head-icon {
    display:none;
  }
  .room-head .btn {
    padding:0 15px;
  }
  .room-head p {
    font-size:11px;
  }
  .steps,.platforms {
    gap:12px;
  }
  .step {
    padding:20px;
  }
  .split {
    grid-template-columns:1fr;
  }
  .site-footer {
    margin:45px 24px 0;
  }
}

@media(max-width:560px) {
  .topbar {
    height:58px;
    padding:0 16px;
    gap:16px;
  }
  .topbar .logo {
    font-size:21px;
  }
  .nav {
    gap:15px;
  }
  .nav a {
    font-size:12px;
  }
  .nav a:nth-child(n+3) {
    display:none;
  }
  .topbar-actions {
    gap:6px;
  }
  .topbar .btn-sm {
    padding:0 10px;
    min-height:27px;
    font-size:11px;
  }
  .hero {
    padding:160px 20px 30px;
    min-height:820px;
    background-position:36% center;
  }
  .hero-title {
    font-size:68px;
    letter-spacing:-4px;
  }
  .hero-tagline {
    font-size:23px;
    letter-spacing:2px;
  }
  .hero-desc {
    font-size:13px;
    margin-top:20px;
  }
  .hero-actions {
    gap:10px;
    width:100%;
  }
  .hero-actions .btn {
    padding:0 13px;
    min-width:0;
    font-size:13px;
    height:45px;
    flex:1;
  }
  .hero-actions .icon {
    width:15px;
  }
  .features {
    gap:22px 12px;
  }
  .feature {
    gap:10px;
  }
  .feature .icon-lg {
    width:27px;
    height:27px;
  }
  .feature h3 {
    font-size:13px;
  }
  .feature p {
    font-size:10px;
    max-width:none;
  }
  .stats {
    gap:0;
  }
  .stat strong {
    font-size:21px;
  }
  .stat span {
    font-size:10px;
  }
  .section {
    padding:42px 20px 0;
  }
  .section-head h2 {
    font-size:22px;
  }
  .steps,.platforms {
    grid-template-columns:1fr;
  }
  .step {
    padding:20px 20px 20px 77px;
  }
  .step-num {
    position:absolute;
    left:20px;
    top:22px;
    margin:0;
  }
  .step>.icon {
    display:none;
  }
  .platform {
    display:grid;
    grid-template-columns:40px 1fr auto;
    column-gap:15px;
    text-align:left;
    padding:20px;
  }
  .platform>.icon {
    grid-row:1/3;
    margin:0;
  }
  .platform h3 {
    font-size:16px;
  }
  .platform p {
    grid-column:2;
    margin:0;
    font-size:11px;
  }
  .platform .btn {
    grid-column:3;
    grid-row:1/3;
  }
  .split>.card {
    padding:20px;
  }
  .news li {
    grid-template-columns:50px 80px 1fr;
    font-size:11px;
  }
  .site-footer {
    flex-direction:column;
    font-size:10px;
  }
  .auth {
    display:flex;
    justify-content:center;
    padding:100px 22px 60px;
    background-position:65% center;
  }
  .auth>.logo {
    left:24px;
    top:30px;
    font-size:29px;
  }
  .perks {
    display:none;
  }
  .auth-card {
    width:100%;
    max-width:400px;
    padding:27px 24px;
  }
  .auth-card h1 {
    font-size:26px;
  }
  .auth>.demo-note {
    font-size:10px;
    bottom:22px;
  }
  .app {
    grid-template-columns:1fr;
    grid-template-rows:54px auto 1fr;
    min-height:850px;
    height:100svh;
  }
  .app.no-side {
    grid-template-rows:54px 1fr;
    min-height:880px;
  }
  .app-header {
    padding:0 16px;
  }
  .app-header .logo {
    font-size:23px;
  }
  .sidebar {
    padding:7px 10px;
    display:block;
    border-right:0;
    border-bottom:1px solid var(--line);
    overflow-x:auto;
  }
  .side-nav {
    display:flex;
    gap:5px;
    min-width:max-content;
  }
  .side-nav a {
    padding:7px 10px;
    gap:7px;
  }
  .side-nav .icon {
    width:16px;
    height:16px;
  }
  .side-user {
    display:none;
  }
  .main {
    padding:20px 14px;
  }
  .page-head {
    gap:10px;
    margin-bottom:18px;
  }
  .page-head h1 {
    font-size:23px;
  }
  .page-head p {
    font-size:10px;
    max-width:210px;
  }
  .page-head-actions .btn {
    font-size:12px;
    padding:0 10px;
    min-height:34px;
  }
  .page-head-actions .icon {
    width:15px;
  }
  .tabs {
    margin-bottom:12px;
  }
  .tabs a {
    font-size:11px;
    padding:9px 3px;
  }
  .table {
    min-width:680px;
    font-size:12px;
  }
  .table td {
    padding:9px 11px;
  }
  .table-foot {
    font-size:10px;
  }
  .no-side .main {
    padding:20px 14px;
  }
  .room-head {
    align-items:flex-start;
    position:relative;
    padding-bottom:15px;
    gap:12px;
  }
  .room-head h1 {
    font-size:18px;
  }
  .room-head p {
    font-size:10px;
  }
  .room-head .actions {
    margin-left:0;
    width:100%;
    justify-content:flex-end;
  }
  .room-head .actions>a {
    display:inline-flex;
    margin-right:auto;
  }
  .room-head .actions .btn {
    min-height:34px;
  }
  .room-head .icon-btn {
    height:34px;
    width:34px;
  }
  .room-bottom {
    grid-template-columns:1fr;
  }
  .map-card {
    flex-direction:row;
    gap:16px;
    padding:10px;
  }
  .map-card img {
    width:43%;
    height:146px;
  }
  .map-card dl {
    font-size:11px;
  }
  .map-card .btn {
    margin-top:7px;
  }
  .chat {
    min-height:210px;
  }
  .chat-log {
    font-size:11px;
  }
  .prototype-toast {
    font-size:12px;
    width:max-content;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  * {
    transition:none!important;
  }
}