:root {
  --bg: #010406;
  --bg-2: #03080c;
  --panel: #040b10;
  --card: #050d12;
  --card-2: #071118;
  --card-3: #09141c;
  --border: rgba(139, 164, 181, 0.14);
  --border-strong: rgba(139, 164, 181, 0.22);
  --text: #f0f1f3;
  --muted: #929aa5;
  --muted-2: #65707c;
  --red: #ff1727;
  --red-bright: #ff2635;
  --red-dark: #8f0711;
  --red-soft: rgba(255, 23, 39, 0.12);
  --red-soft-2: rgba(255, 23, 39, 0.2);
  --radius: 10px;
  --sidebar-w: 244px;
  --font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }
html { background: var(--bg); }
body {
  min-width: 320px;
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  background:
    radial-gradient(circle at 86% 8%, rgba(255, 23, 39, 0.035), transparent 24%),
    linear-gradient(140deg, #010406 0%, #02070a 48%, #010406 100%);
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.accent { color: var(--red); font-weight: 600; }

/* login */
.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 23, 39, 0.09), transparent 34%),
    linear-gradient(135deg, #010406, #04090d 55%, #010305);
}
.login-card {
  width: min(410px, 94vw);
  padding: 32px;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  background: linear-gradient(155deg, rgba(8, 18, 25, 0.98), rgba(2, 7, 10, 0.98));
  box-shadow: 0 26px 90px rgba(0, 0, 0, 0.7), 0 0 42px rgba(255, 23, 39, 0.06);
}
.login-brand-image { display: block; width: 208px; max-width: 75%; margin: 0 auto 22px; }
.login-hint { color: var(--muted); text-align: center; font-size: 12px; margin-bottom: 22px; letter-spacing: .04em; }
.login-card label { display: block; margin: 12px 0 6px; color: var(--muted); font-size: 12px; }
.login-card input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  outline: 0;
  color: var(--text);
  background: #03080d;
}
.login-card input:focus { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.btn-primary {
  width: 100%;
  margin-top: 20px;
  padding: 12px 16px;
  border: 1px solid var(--red);
  border-radius: 9px;
  cursor: pointer;
  color: #fff;
  font-weight: 600;
  background: linear-gradient(135deg, var(--red-bright), #a80813);
  box-shadow: 0 8px 24px rgba(255, 23, 39, 0.18);
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:disabled { opacity: .55; cursor: wait; }
.error-text { margin-top: 10px; color: #ff5c68; font-size: 12px; }
.login-foot { margin-top: 16px; color: var(--muted-2); font-size: 10px; text-align: center; word-break: break-all; }

/* shell */
.app {
  display: flex;
  gap: 18px;
  min-height: 100vh;
  padding: 11px 12px;
}
.sidebar {
  width: var(--sidebar-w);
  height: calc(100vh - 22px);
  flex: 0 0 var(--sidebar-w);
  position: sticky;
  top: 11px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 11px;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 23, 39, 0.045), transparent 20%),
    linear-gradient(180deg, #030a0f 0%, #03090d 50%, #02070a 100%);
  transition: width .2s ease, flex-basis .2s ease;
}
.sidebar-brand {
  height: 84px;
  display: flex;
  align-items: center;
  flex: 0 0 84px;
  padding: 6px 14px 4px;
}
.sidebar-brand img { width: 208px; max-width: 100%; height: auto; object-fit: contain; object-position: left center; }
.nav {
  flex: 1;
  min-height: 0;
  padding: 0 10px 12px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 23, 39, .28) transparent;
}
.nav-section {
  margin-top: 8px;
  padding: 9px 8px 5px;
  overflow: hidden;
  color: #8c96a1;
  font-size: 10px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: .02em;
  white-space: nowrap;
}
.nav-item {
  min-height: 39px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 2px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #a7adb5;
  font-size: 13px;
  white-space: nowrap;
  transition: color .14s ease, background .14s ease, border-color .14s ease;
}
.nav-item svg { width: 18px; height: 18px; flex: 0 0 18px; color: #aeb5bc; stroke-width: 1.45; }
.nav-item:hover { color: #fff; background: rgba(255, 255, 255, .025); }
.nav-item:hover svg { color: var(--red); }
.nav-item.active {
  color: #fff;
  border-color: rgba(255, 23, 39, .72);
  background: linear-gradient(90deg, rgba(255, 23, 39, .25), rgba(255, 23, 39, .045));
  box-shadow: inset 3px 0 0 var(--red), 0 0 22px rgba(255, 23, 39, .055);
}
.nav-item.active svg { color: #fff; }
.sidebar-collapse {
  height: 49px;
  margin: 10px 14px 14px;
  flex: 0 0 49px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  color: #a4abb4;
  background: rgba(3, 10, 14, .72);
  cursor: pointer;
  white-space: nowrap;
}
.sidebar-collapse svg { width: 17px; height: 17px; }
.sidebar-collapse:hover { color: #fff; border-color: rgba(255, 23, 39, .55); }
.app.sidebar-collapsed { --sidebar-w: 76px; }
.sidebar-collapsed .sidebar-brand { padding-inline: 10px; }
.sidebar-collapsed .sidebar-brand img { width: 52px; height: 60px; object-fit: cover; object-position: left center; }
.sidebar-collapsed .nav-section,
.sidebar-collapsed .nav-item span,
.sidebar-collapsed .sidebar-collapse span { display: none; }
.sidebar-collapsed .nav-item { justify-content: center; padding-inline: 8px; }
.sidebar-collapsed .sidebar-collapse svg { transform: rotate(180deg); }

.main {
  min-width: 0;
  min-height: calc(100vh - 22px);
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 11px;
  background:
    radial-gradient(circle at 88% 0, rgba(255, 23, 39, .025), transparent 23%),
    linear-gradient(180deg, rgba(3, 10, 15, .98), rgba(2, 8, 12, .98));
}
.topbar {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 15px 12px 25px;
  border-bottom: 1px solid rgba(139, 164, 181, .095);
}
.topbar-title { min-width: 220px; }
.topbar h1 { font-size: 20px; line-height: 1.2; font-weight: 500; letter-spacing: -.02em; }
.welcome { margin-top: 6px; color: #adb3ba; font-size: 13px; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.date-time { min-width: 70px; text-align: right; line-height: 1.25; }
.date-time strong { display: block; font-size: 15px; font-weight: 400; }
.date-time span { color: #a3a9b0; font-size: 11px; }
.clock-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #050c11;
}
.clock-mark svg { width: 31px; height: 31px; color: #ecedef; stroke-width: 1.3; }
.playtime {
  min-width: 138px;
  padding-right: 13px;
  border-right: 1px solid var(--border);
  line-height: 1.3;
}
.playtime span { display: block; color: #a3a9b0; font-size: 11px; }
.playtime strong { color: var(--red); font-size: 13px; font-weight: 500; }
.notification-button {
  width: 44px;
  height: 44px;
  position: relative;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 9px;
  color: #dce0e4;
  background: #050c11;
  cursor: pointer;
}
.notification-button svg { width: 22px; height: 22px; }
.notification-button:hover { color: var(--red); border-color: rgba(255, 23, 39, .45); }
.notification-count {
  width: 17px;
  height: 17px;
  position: absolute;
  top: -6px;
  right: -4px;
  display: grid;
  place-items: center;
  border: 2px solid #03090d;
  border-radius: 50%;
  color: #fff;
  font-size: 9px;
  background: var(--red);
}
.user-menu-wrap { position: relative; }
.user-chip {
  min-width: 224px;
  height: 54px;
  display: grid;
  grid-template-columns: 44px 1fr 16px;
  align-items: center;
  gap: 9px;
  padding: 5px 10px 5px 5px;
  border: 1px solid var(--border);
  border-radius: 9px;
  text-align: left;
  background: linear-gradient(110deg, rgba(255, 23, 39, .045), transparent 55%), #050c11;
  cursor: pointer;
}
.avatar {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 23, 39, .2);
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  background:
    radial-gradient(circle at 63% 38%, #ff2635 0 2px, transparent 3px),
    radial-gradient(circle at 37% 38%, #ff2635 0 2px, transparent 3px),
    linear-gradient(145deg, #171b1f 20%, #050606 55%, #31070a 100%);
  box-shadow: inset 0 0 18px #000;
}
.user-copy { min-width: 0; }
.user-name { overflow: hidden; color: #f3f3f4; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.user-role { margin-top: 3px; color: #9ca2aa; font-size: 11px; }
.crown { color: var(--red); }
.user-chevron { width: 16px; height: 16px; color: #c4c8cc; }
.user-dropdown {
  width: 100%;
  position: absolute;
  z-index: 20;
  top: calc(100% + 7px);
  right: 0;
  padding: 6px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: #071016;
  box-shadow: 0 16px 50px rgba(0, 0, 0, .7);
}
.user-dropdown button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 0;
  border-radius: 6px;
  color: #d8dade;
  background: transparent;
  cursor: pointer;
}
.user-dropdown button:hover { color: #fff; background: var(--red-soft); }
.user-dropdown svg { width: 17px; height: 17px; color: var(--red); }

/* main content */
.content { flex: 1; padding: 14px 13px; }
.grid-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
  margin-bottom: 14px;
}
.stat-card,
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 92% 28%, rgba(255, 23, 39, .025), transparent 34%),
    linear-gradient(145deg, rgba(6, 15, 21, .98), rgba(3, 10, 14, .98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .008);
}
.stat-card {
  min-height: 123px;
  position: relative;
  overflow: hidden;
  padding: 12px 15px;
}
.stat-card .label { display: flex; align-items: center; gap: 10px; color: #f0f0f1; font-size: 12px; }
.stat-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  border-radius: 7px;
  color: var(--red-bright);
  background: linear-gradient(145deg, rgba(255, 23, 39, .18), rgba(255, 23, 39, .035));
}
.stat-icon svg { width: 25px; height: 25px; stroke-width: 1.7; }
.stat-card .value { margin: 9px 0 2px 4px; color: #f1f2f3; font-size: 23px; line-height: 1; font-weight: 400; }
.stat-card .value .slash { color: #68727d; }
.stat-card .value .secondary-value { color: #aeb3ba; }
.stat-card .sub { margin-left: 4px; color: #9098a2; font-size: 11px; }
.stat-spark { position: absolute; right: 11px; bottom: 15px; width: 43%; height: 45px; }
.stat-spark .area { fill: url(#sparkFade); stroke: none; }
.stat-spark .line { fill: none; stroke: var(--red); stroke-width: 1.5; }
.stat-spark .point { fill: var(--red); stroke: #ff8a93; stroke-width: 1; vector-effect: non-scaling-stroke; }

.dashboard-middle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: 12px;
  margin-bottom: 14px;
}
.dashboard-lower {
  display: grid;
  grid-template-columns: minmax(270px, .92fr) minmax(300px, 1.04fr) minmax(390px, 1.4fr);
  gap: 12px;
}
.dashboard-middle > .card { height: 267px; min-height: 0; }
.dashboard-lower > .card { height: 341px; min-height: 0; }
.card { padding: 15px 16px; }
.card-h {
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  color: #f0f1f3;
  font-size: 16px;
  font-weight: 400;
}
.card-title { display: inline-flex; align-items: center; gap: 11px; }
.card-title svg { width: 25px; height: 25px; color: var(--red); }
.link-btn,
.card-h a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: #acb2b9;
  font-size: 11px;
  font-weight: 400;
  background: rgba(2, 8, 12, .4);
  cursor: pointer;
}
.link-btn:hover, .card-h a:hover { color: #fff; border-color: rgba(255, 23, 39, .45); }
.link-btn svg { width: 16px; height: 16px; }

.news-list { padding: 2px 7px 0; border: 1px solid var(--border); border-radius: 9px; }
.news-item {
  min-height: 62px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 7px;
  border-bottom: 1px solid rgba(139, 164, 181, .12);
  color: #adb3ba;
  font-size: 11px;
}
.news-item:last-child { border-bottom: 0; }
.news-copy { min-width: 0; line-height: 1.55; }
.news-copy > div:first-child { overflow: hidden; text-overflow: ellipsis; }
.news-date { color: #9fa6ae; white-space: nowrap; }
.badge {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 4px 8px;
  border: 1px solid rgba(255, 23, 39, .18);
  border-radius: 6px;
  color: var(--red);
  font-size: 9px;
  font-weight: 500;
  background: rgba(255, 23, 39, .055);
  white-space: nowrap;
}
.badge.info { color: #ff5360; background: rgba(255, 23, 39, .04); }
.badge.announce { color: #ff737d; }
.news-meta { margin-top: 3px; color: #76818c; font-size: 10px; }
.quick-grid { height: 185px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; padding-top: 1px; }
.quick-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  min-width: 0;
  padding: 12px 6px;
  border: 1px solid var(--border);
  border-radius: 9px;
  color: #ededee;
  text-align: center;
  background: linear-gradient(150deg, rgba(8, 18, 25, .96), rgba(3, 10, 14, .96));
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.quick-btn:hover { transform: translateY(-2px); border-color: rgba(255, 23, 39, .5); background: var(--red-soft); }
.quick-btn .q-ico { color: var(--red); }
.quick-btn .q-ico svg { width: 43px; height: 43px; stroke-width: 1.55; }
.quick-btn .q-label { font-size: 13px; line-height: 1.45; white-space: pre-line; }

.rank-tabs { display: flex; justify-content: center; gap: 7px; margin: 1px 0 8px; }
.rank-tab {
  min-width: 74px;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: #8f98a2;
  font-size: 9px;
  background: rgba(3, 10, 14, .65);
}
.rank-tab.active { color: #fff; border-color: rgba(255, 23, 39, .68); background: var(--red-soft-2); }
.leaders-list { padding: 0 4px; border: 1px solid var(--border); border-radius: 8px; }
.leader-row {
  min-height: 36px;
  display: grid;
  grid-template-columns: 22px 32px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 7px;
  padding: 4px 1px;
  border-bottom: 1px solid rgba(139, 164, 181, .1);
  font-size: 11px;
}
.leader-row:last-child { border-bottom: 0; }
.rank-num {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #a7afb7;
  font-size: 10px;
  background: #111920;
}
.leader-row:nth-child(-n + 3) .rank-num { color: var(--red); background: rgba(255, 23, 39, .085); }
.leader-avatar {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 23, 39, .18);
  border-radius: 50%;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  background: radial-gradient(circle at 66% 36%, var(--red) 0 2px, transparent 3px), linear-gradient(145deg, #20262b, #070809 58%, #34070b);
}
.leader-name { overflow: hidden; color: #e9eaec; text-overflow: ellipsis; white-space: nowrap; }
.role-tag { color: #8d96a0; font-size: 8px; white-space: nowrap; }
.role-tag.leader { color: #d7d9dc; }
.leader-date { color: #ff6570; font-size: 8px; white-space: nowrap; }
.card-footer-action { display: flex; justify-content: center; margin-top: 12px; }

.activity-list { padding: 0 4px; border: 1px solid var(--border); border-radius: 8px; }
.act-row {
  min-height: 51px;
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 5px 2px;
  border-bottom: 1px solid rgba(139, 164, 181, .1);
  color: #aeb4bb;
  font-size: 9px;
}
.act-row:last-child { border-bottom: 0; }
.act-icon {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: var(--red);
  background: var(--red-soft);
}
.act-icon svg { width: 18px; height: 18px; }
.act-row strong { color: #eef0f2; font-size: 10px; font-weight: 500; }
.act-time { color: #9ba2aa; font-size: 8px; white-space: nowrap; }

.donut-wrap { min-height: 223px; display: grid; grid-template-columns: 174px minmax(0, 1fr); align-items: center; gap: 18px; }
.donut {
  width: 160px;
  height: 160px;
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(#ff1727 0 10%, #d51320 10% 20%, #b30f19 20% 36%, #8d0c14 36% 52%, #670a10 52% 70%, #44070b 70% 86%, #260407 86% 100%);
  box-shadow: 0 0 30px rgba(255, 23, 39, .055);
}
.donut::after { content: ""; position: absolute; inset: 24px; border-radius: 50%; background: #040b10; box-shadow: inset 0 0 18px #000; }
.donut-center { position: relative; z-index: 1; color: #9ba2aa; font-size: 11px; text-align: center; }
.donut-center strong { display: block; margin: 2px 0; color: #f2f3f4; font-size: 29px; line-height: 1; font-weight: 400; }
.legend { padding: 10px 14px; border-left: 1px solid var(--border); color: #aeb4bb; font-size: 10px; }
.legend-title { margin-bottom: 10px; color: #aab0b7; font-size: 11px; }
.legend div { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0; }
.legend div > span:first-child { display: inline-flex; align-items: center; }
.dot { width: 9px; height: 9px; display: inline-block; margin-right: 9px; border-radius: 3px; background: var(--red); }
.legend div:nth-of-type(2) .dot { opacity: .88; }
.legend div:nth-of-type(3) .dot { opacity: .75; }
.legend div:nth-of-type(4) .dot { opacity: .63; }
.legend div:nth-of-type(5) .dot { opacity: .51; }
.legend div:nth-of-type(6) .dot { opacity: .39; }
.legend div:nth-of-type(7) .dot { opacity: .27; }

/* generic pages */
.grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; margin-bottom: 14px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1.2fr .9fr; gap: 14px; }
.command-strip { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.command-strip strong, .command-strip span { display: block; }
.command-strip span { margin-top: 4px; color: var(--muted); font-size: 12px; }
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 14px; }
.filter-bar input, .filter-bar select { min-width: 150px; }
.filter-bar input.item-check, .item-check { width: auto; min-width: 0; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.detail-tile { padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-2); }
.detail-tile .label { color: var(--muted); font-size: 11px; }
.detail-tile .value { margin-top: 3px; font-size: 14px; font-weight: 600; word-break: break-word; }
.state-ok { color: #ff5f6a; }
.state-bad { color: var(--red); }
.stack-list { display: grid; gap: 9px; }
.stack-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 11px; border: 1px solid var(--border); border-radius: 8px; }
.stack-row.unread { border-left: 3px solid var(--red); }
.table-wrap { overflow-x: auto; }
.member-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 12px; }
.member-pagination .btn-sm:disabled { cursor: not-allowed; opacity: .45; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th, td { padding: 10px 8px; border-bottom: 1px solid var(--border); text-align: left; }
th { color: var(--muted); font-size: 10px; font-weight: 500; }
.btn-sm {
  padding: 7px 11px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  color: var(--text);
  font-size: 11px;
  background: var(--card-2);
  cursor: pointer;
}
.btn-sm:hover { border-color: var(--red); }
.btn-sm.danger { color: #ff6570; }
.btn-sm.primary { color: #fff; border-color: rgba(255, 23, 39, .45); background: var(--red-soft-2); }
.form-row { display: flex; flex-wrap: wrap; gap: 11px; margin-bottom: 14px; }
.form-row input, .form-row select, .form-row textarea {
  min-width: 140px;
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  outline: 0;
  color: var(--text);
  background: var(--bg-2);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color: var(--red); }
.form-row textarea { width: 100%; min-height: 80px; }
.empty, .loading { padding: 24px; color: var(--muted); text-align: center; font-size: 12px; }

/* members */
.members-view .topbar { display: none; }
.members-view .content { display: flex; min-height: 0; padding: 13px 12px 9px; }
.members-view .footer {
  min-height: 68px;
  grid-template-columns: 1fr auto;
  margin-bottom: 11px;
  padding-block: 8px;
}
.members-view .footer-social { display: none; }
.members-view .footer-status { display: flex; min-width: 150px; }
.members-view .footer-card.about img { width: 52px; height: 49px; flex-basis: 52px; }
.members-view .about-copy small { display: none; }
.members-screen { width: 100%; min-width: 0; display: flex; flex-direction: column; }
.members-heading {
  min-height: 58px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 1px 8px 8px;
}
.members-heading-copy { display: flex; align-items: flex-start; gap: 12px; }
.members-heading-icon {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--red);
  background: var(--red-soft);
  box-shadow: 0 0 18px rgba(255, 23, 39, .11);
}
.members-heading-icon svg { width: 24px; height: 24px; }
.members-heading h2 { font-size: 20px; line-height: 1.15; font-weight: 600; }
.members-heading p { margin-top: 6px; color: #929aa4; font-size: 10px; }
.members-total {
  min-width: 132px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 13px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: rgba(5, 13, 18, .75);
}
.members-total > span { color: var(--red); }
.members-total svg { width: 25px; height: 25px; }
.members-total small { display: block; color: #8f98a3; font-size: 8px; white-space: nowrap; }
.members-total strong { display: block; margin-top: 1px; color: var(--red); font-size: 16px; line-height: 1; font-weight: 500; }
.members-toolbar {
  min-height: 48px;
  display: grid;
  grid-template-columns: minmax(250px, 320px) auto 1fr;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.member-search {
  height: 36px;
  display: grid;
  grid-template-columns: 20px 1fr 20px;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: #03090d;
}
.member-search:focus-within { border-color: rgba(255, 23, 39, .62); box-shadow: 0 0 0 2px rgba(255, 23, 39, .06); }
.member-search svg { width: 17px; height: 17px; color: #8f98a2; }
.member-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: #e8eaec; font-size: 10px; background: transparent; }
.member-search input::placeholder { color: #6f7a85; }
.member-search kbd { display: grid; place-items: center; height: 18px; border: 1px solid var(--border); border-radius: 4px; color: #8f98a2; font-size: 9px; font-family: inherit; background: #081119; }
.member-filter-chips { display: flex; align-items: center; gap: 8px; }
.member-filter-chips button {
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: #aeb4bb;
  font-size: 9px;
  background: #050c11;
  cursor: pointer;
  white-space: nowrap;
}
.member-filter-chips button svg { width: 14px; height: 14px; }
.member-filter-chips button:hover { color: #fff; border-color: rgba(255, 23, 39, .4); }
.member-filter-chips button.active { color: #fff; border-color: rgba(255, 23, 39, .6); background: var(--red-soft-2); box-shadow: inset 0 0 18px rgba(255, 23, 39, .04); }
.filter-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px rgba(255, 23, 39, .35); }
.member-found { justify-self: end; color: #9ba3ac; font-size: 9px; white-space: nowrap; }
.members-table-wrap {
  overflow: visible;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(5, 14, 20, .97), rgba(2, 8, 12, .98));
}
.members-table { width: 100%; table-layout: fixed; font-size: 9px; }
.members-table th, .members-table td { padding: 6px 8px; border-bottom: 1px solid rgba(139, 164, 181, .11); vertical-align: middle; }
.members-table th { height: 35px; color: #a3abb4; font-size: 8px; font-weight: 500; }
.members-table tbody tr:last-child td { border-bottom: 0; }
.members-table th:nth-child(1) { width: 4%; }
.members-table th:nth-child(2) { width: 17%; }
.members-table th:nth-child(3) { width: 12%; }
.members-table th:nth-child(4) { width: 14%; }
.members-table th:nth-child(5) { width: 11%; }
.members-table th:nth-child(6) { width: 11%; }
.members-table th:nth-child(7) { width: 9%; }
.members-table th:nth-child(8) { width: 12%; }
.members-table th:nth-child(9) { width: 10%; }
.member-row { height: 54px; position: relative; transition: background .13s ease; }
.member-row:hover { background: rgba(255, 255, 255, .012); }
.member-row.warning { background: linear-gradient(90deg, rgba(255, 143, 23, .035), transparent 32%); box-shadow: inset 0 0 0 1px rgba(255, 99, 28, .62); }
.member-row.critical { background: linear-gradient(90deg, rgba(255, 23, 39, .08), transparent 38%); box-shadow: inset 0 0 0 1px rgba(255, 23, 39, .72), 0 0 14px rgba(255, 23, 39, .05); }
.member-number { color: #9da5ae; text-align: center; }
.member-player { display: flex; align-items: center; gap: 9px; min-width: 0; }
.member-avatar {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 23, 39, .2);
  border-radius: 50%;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  background: radial-gradient(circle at 65% 36%, var(--red) 0 2px, transparent 3px), linear-gradient(145deg, #20272c, #060708 57%, #31070b);
  box-shadow: inset 0 0 12px #000;
}
.member-player > span:last-child { min-width: 0; }
.member-player strong { display: block; overflow: hidden; color: #eff0f2; font-size: 10px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.member-player small { display: block; margin-top: 3px; color: #77828d; font-size: 8px; }
.family-role { display: inline-flex; align-items: center; gap: 7px; color: #9da5ae; font-size: 9px; white-space: nowrap; }
.family-role svg { width: 14px; height: 14px; }
.family-role.leader, .family-role.deputy, .family-role.shooter { color: #ff5964; }
.family-role.novice { color: #929aa4; }
.member-status { display: inline-flex; align-items: center; gap: 6px; color: #a6aeb7; font-size: 9px; white-space: nowrap; }
.member-status i { width: 8px; height: 8px; display: inline-block; border-radius: 50%; background: #59636e; }
.member-status.online { color: #ff4b58; font-weight: 500; }
.member-status.online i { background: var(--red); box-shadow: 0 0 8px rgba(255, 23, 39, .45); }
.member-status.offline i { background: #7d1b23; }
.member-status-detail { display: block; margin-top: 3px; color: #737e89; font-size: 7px; line-height: 1.25; }
.member-warns { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.warn-box { width: 17px; height: 17px; display: grid; place-items: center; border: 1px solid #455360; border-radius: 3px; color: transparent; font-size: 12px; font-style: normal; line-height: 1; background: #061019; }
.warn-box.active { color: var(--red); border-color: rgba(255, 23, 39, .75); background: rgba(255, 23, 39, .08); }
.member-warns b { color: var(--red); font-size: 8px; font-weight: 500; }
.inactive-days { display: inline-flex; align-items: center; gap: 7px; color: #c3c8ce; }
.inactive-days.danger { color: var(--red); font-weight: 600; }
.sleep-mark { padding: 3px 5px; border-radius: 8px; color: var(--red); font-size: 7px; font-style: normal; background: var(--red-soft); }
.member-contribution { display: inline-flex; align-items: center; gap: 7px; color: #e1e4e7; font-size: 9px; }
.member-contribution i { color: var(--red); font-size: 13px; font-style: normal; }
.table-help { width: 12px; height: 12px; display: inline-grid; place-items: center; margin-left: 3px; border: 1px solid #687580; border-radius: 50%; color: #8f99a3; font-size: 7px; }
.member-actions { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.member-icon-button {
  width: 35px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid #33424f;
  border-radius: 6px;
  color: #d2d6da;
  background: #061019;
  cursor: pointer;
}
.member-icon-button svg { width: 14px; height: 14px; }
.member-icon-button:hover { color: #fff; border-color: rgba(255, 23, 39, .56); background: var(--red-soft); }
.member-icon-button.remove { color: var(--red); border-color: rgba(255, 23, 39, .48); }
.member-action-menu {
  width: 176px;
  position: absolute;
  z-index: 40;
  top: 34px;
  right: 42px;
  padding: 6px;
  border: 1px solid rgba(255, 23, 39, .38);
  border-radius: 8px;
  background: #071016;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .82), 0 0 24px rgba(255, 23, 39, .08);
}
.member-action-title { padding: 6px 8px 8px; border-bottom: 1px solid var(--border); color: #7f8993; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.member-action-menu button { width: 100%; display: flex; align-items: center; gap: 9px; padding: 8px; border: 0; border-radius: 5px; color: #cbd0d5; font-size: 9px; text-align: left; background: transparent; cursor: pointer; }
.member-action-menu button svg { width: 14px; height: 14px; color: var(--red); }
.member-action-menu button:hover { color: #fff; background: var(--red-soft); }
.member-action-menu button:disabled { opacity: .32; cursor: not-allowed; }
.members-pagination {
  min-height: 45px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 6px 4px;
  color: #8f98a3;
  font-size: 8px;
}
.members-pagination label { display: inline-flex; align-items: center; gap: 6px; }
.members-pagination select { padding: 6px 22px 6px 9px; border: 1px solid var(--border); border-radius: 6px; outline: 0; color: #c8cdd2; font-size: 8px; background: #061019; }
.members-pages { display: flex; align-items: center; gap: 6px; }
.member-page-number, .member-page-arrow {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #a8afb7;
  font-size: 8px;
  background: transparent;
  cursor: pointer;
}
.member-page-number:hover, .member-page-arrow:hover { border-color: rgba(255, 23, 39, .42); }
.member-page-number.active { color: #fff; border-color: rgba(255, 23, 39, .45); background: linear-gradient(135deg, rgba(255, 23, 39, .5), rgba(255, 23, 39, .15)); box-shadow: 0 0 13px rgba(255, 23, 39, .13); }
.member-page-arrow { border-color: var(--border); background: #050d13; }
.member-page-arrow svg { width: 14px; height: 14px; }
.member-page-arrow.next svg { transform: rotate(180deg); }
.member-page-arrow:disabled { opacity: .3; cursor: not-allowed; }
.page-ellipsis { width: 20px; color: #7e8993; text-align: center; }
.members-legend {
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding: 8px 10px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: #8e98a2;
  font-size: 8px;
  white-space: nowrap;
  background: rgba(4, 12, 17, .72);
}
.members-legend .member-warns { transform: scale(.8); transform-origin: right center; margin-right: -5px; }
.legend-divider { width: 1px; height: 17px; flex: 0 0 1px; background: var(--border); }

/* news center */
.news-view .topbar { display: none; }
.news-view .content { padding: 12px 12px 9px; }
.news-view .footer {
  min-height: 64px;
  grid-template-columns: 1fr auto;
  margin-bottom: 11px;
  padding-block: 7px;
}
.news-view .footer-social { display: none; }
.news-view .footer-status { display: flex; min-width: 150px; }
.news-view .footer-card.about img { width: 48px; height: 46px; flex-basis: 48px; }
.news-view .about-copy small { display: none; }
.news-center { min-width: 0; color: #e8eaed; }
.news-center-heading {
  min-height: 53px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 0 5px 7px;
}
.news-heading-copy { display: flex; align-items: flex-start; gap: 11px; }
.news-heading-icon {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--red);
  background: var(--red-soft);
  box-shadow: 0 0 18px rgba(255, 23, 39, .12);
}
.news-heading-icon svg { width: 23px; height: 23px; }
.news-heading-copy h2 { font-size: 19px; line-height: 1.2; font-weight: 600; }
.news-heading-copy p { margin-top: 5px; color: #8e98a2; font-size: 9px; }
.news-heading-account { display: flex; align-items: center; gap: 8px; }
.news-heading-date {
  height: 31px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 16px;
  color: #87919c;
  font-size: 8px;
  background: #050d13;
}
.news-heading-avatar, .news-author-avatar {
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 23, 39, .52);
  border-radius: 50%;
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  background: linear-gradient(145deg, #ff2635, #7c0610);
  box-shadow: 0 0 13px rgba(255, 23, 39, .12);
}
.news-heading-account > span:last-child { min-width: 105px; }
.news-heading-account strong { display: block; color: #e7e9eb; font-size: 9px; font-weight: 500; }
.news-heading-account small { display: block; margin-top: 2px; color: #ff5964; font-size: 7px; }
.news-tabs-row {
  min-height: 43px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-inline: -12px;
  padding: 0 12px;
  border-bottom: 1px solid var(--border);
}
.news-tabs { display: flex; align-items: stretch; align-self: stretch; gap: 1px; }
.news-tabs button {
  min-width: 92px;
  position: relative;
  padding: 0 13px 10px;
  border: 0;
  color: #858f99;
  font-size: 9px;
  background: transparent;
  cursor: pointer;
}
.news-tabs button::after {
  height: 2px;
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  content: "";
  border-radius: 2px;
  background: transparent;
}
.news-tabs button:hover { color: #d4d8dc; }
.news-tabs button.active { color: #fff; }
.news-tabs button.active::after { background: var(--red); box-shadow: 0 0 10px rgba(255, 23, 39, .45); }
.news-create-button, .news-publish-button {
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 13px;
  border: 1px solid rgba(255, 23, 39, .62);
  border-radius: 6px;
  color: #fff;
  font-size: 9px;
  font-weight: 500;
  background: linear-gradient(135deg, #ff2635, #990812);
  box-shadow: 0 0 19px rgba(255, 23, 39, .16);
  cursor: pointer;
}
.news-create-button svg, .news-publish-button svg { width: 14px; height: 14px; }
.news-create-button:hover, .news-publish-button:hover { filter: brightness(1.12); }
.news-compose {
  margin: 9px 0 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(7, 16, 23, .98), rgba(3, 9, 14, .98));
  box-shadow: 0 10px 30px rgba(0, 0, 0, .13);
}
.news-section-title { min-height: 20px; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.news-section-title > span { color: var(--red); }
.news-section-title svg { width: 14px; height: 14px; }
.news-section-title strong { font-size: 10px; font-weight: 600; }
.news-section-title button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 3px 7px;
  border: 0;
  color: #8f99a3;
  font-size: 8px;
  background: transparent;
  cursor: pointer;
}
.news-compose-grid { display: grid; grid-template-columns: 1.7fr .92fr 1fr; gap: 10px; }
.news-field { min-width: 0; display: block; }
.news-field > span { display: block; margin-bottom: 4px; color: #87919b; font-size: 7px; }
.news-field > div { position: relative; }
.news-field input, .news-field select,
.news-feed-toolbar select, .news-advanced-filters select, .news-pagination select {
  width: 100%;
  height: 30px;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  outline: 0;
  color: #ccd1d6;
  font-size: 8px;
  background: #050d14;
}
.news-field input { padding: 0 46px 0 9px; }
.news-field select, .news-feed-toolbar select, .news-advanced-filters select, .news-pagination select { padding: 0 25px 0 9px; }
.news-field input:focus, .news-field select:focus, .news-feed-toolbar select:focus,
.news-advanced-filters select:focus { border-color: rgba(255, 23, 39, .58); }
.news-title-field small { position: absolute; top: 9px; right: 8px; color: #66727e; font-size: 6px; }
.news-editor-field { margin-top: 7px; }
.news-editor-shell { overflow: hidden; border: 1px solid var(--border-strong); border-radius: 5px; background: #050d14; }
.news-editor-shell:focus-within { border-color: rgba(255, 23, 39, .58); }
.news-editor-toolbar {
  height: 25px;
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 0 5px;
  border-bottom: 1px solid var(--border);
  background: #030a0f;
}
.news-editor-toolbar button {
  width: 25px;
  height: 21px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 4px;
  color: #9ba3ac;
  font-size: 9px;
  background: transparent;
  cursor: pointer;
}
.news-editor-toolbar button:hover { color: #fff; background: var(--red-soft); }
.news-editor {
  min-height: 60px;
  max-height: 150px;
  overflow-y: auto;
  padding: 7px 8px;
  outline: 0;
  color: #c6cbd0;
  font-size: 9px;
  line-height: 1.5;
}
.news-editor:empty::before { color: #697581; content: attr(data-placeholder); pointer-events: none; }
.news-editor p { margin-bottom: 5px; }
.news-compose-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.news-secondary-button {
  height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 11px;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  color: #9da5ae;
  font-size: 8px;
  background: #050d14;
  cursor: pointer;
}
.news-secondary-button svg { width: 13px; height: 13px; }
.news-secondary-button:hover { color: #fff; border-color: rgba(255, 23, 39, .4); }
.news-publish-button { height: 30px; font-size: 8px; }
.news-feed-section { min-width: 0; }
.news-feed-toolbar {
  min-height: 39px;
  display: grid;
  grid-template-columns: 1fr 136px auto 210px;
  align-items: center;
  gap: 7px;
}
.news-feed-title { display: flex; align-items: center; gap: 8px; }
.news-feed-title svg { width: 14px; height: 14px; color: var(--red); }
.news-feed-title strong { font-size: 10px; font-weight: 600; }
.news-feed-toolbar select { height: 29px; }
.news-filter-button {
  height: 29px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: #929ba5;
  font-size: 8px;
  background: #050d13;
  cursor: pointer;
}
.news-filter-button svg { width: 12px; height: 12px; }
.news-filter-button.active, .news-filter-button:hover { color: #fff; border-color: rgba(255, 23, 39, .4); background: var(--red-soft); }
.news-feed-search {
  height: 29px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: #050d13;
}
.news-feed-search:focus-within { border-color: rgba(255, 23, 39, .5); }
.news-feed-search input { min-width: 0; flex: 1; border: 0; outline: 0; color: #ccd1d5; font-size: 8px; background: transparent; }
.news-feed-search svg { width: 13px; height: 13px; color: #737e89; }
.news-advanced-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(130px, 1fr)) auto;
  align-items: end;
  gap: 8px;
  margin-bottom: 7px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(5, 13, 19, .82);
}
.news-advanced-filters label span { display: block; margin-bottom: 4px; color: #75818c; font-size: 7px; }
.news-advanced-filters select { height: 29px; }
.news-advanced-filters button {
  height: 29px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: #929ca5;
  font-size: 8px;
  background: #050d13;
  cursor: pointer;
}
.news-advanced-filters button svg { width: 12px; height: 12px; }
.news-feed-list { display: grid; gap: 5px; }
.news-feed-card {
  --news-type-color: #cf941b;
  min-height: 75px;
  position: relative;
  display: grid;
  grid-template-columns: 67px minmax(0, 1fr) 92px 38px;
  align-items: stretch;
  overflow: visible;
  border: 1px solid var(--border);
  border-left-color: var(--news-type-color);
  border-radius: 7px;
  background: linear-gradient(105deg, color-mix(in srgb, var(--news-type-color) 4%, #050d13), #050d13 36%, #040b10);
  box-shadow: -5px 0 14px color-mix(in srgb, var(--news-type-color) 13%, transparent);
  cursor: pointer;
}
.news-feed-card.important { --news-type-color: #ff2635; }
.news-feed-card.announcement { --news-type-color: #d49a22; }
.news-feed-card.congratulation { --news-type-color: #8f55d9; }
.news-feed-card:hover { border-color: color-mix(in srgb, var(--news-type-color) 52%, var(--border)); }
.news-date-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--border);
  color: #bdc3c9;
}
.news-date-block strong { font-size: 17px; line-height: 1; font-weight: 600; }
.news-date-block span { margin-top: 2px; font-size: 7px; font-weight: 600; }
.news-date-block small { margin-top: 4px; color: #78838e; font-size: 7px; }
.news-card-copy { min-width: 0; padding: 10px 12px 8px; }
.news-card-title-row { min-width: 0; display: flex; align-items: center; gap: 7px; }
.news-card-title-row h3 { overflow: hidden; color: #ebedef; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.news-type-badge, .news-pin-badge, .news-visibility-badge {
  height: 15px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
  border: 1px solid color-mix(in srgb, var(--news-type-color) 44%, transparent);
  border-radius: 4px;
  color: var(--news-type-color);
  font-size: 6px;
  background: color-mix(in srgb, var(--news-type-color) 9%, transparent);
  white-space: nowrap;
}
.news-pin-badge { color: #ff5964; border-color: rgba(255, 23, 39, .28); background: rgba(255, 23, 39, .07); }
.news-visibility-badge { color: #9ba4ad; border-color: var(--border); background: #071018; }
.news-pin-badge svg, .news-visibility-badge svg { width: 8px; height: 8px; }
.news-card-text {
  max-height: 25px;
  margin-top: 5px;
  overflow: hidden;
  color: #858f99;
  font-size: 8px;
  line-height: 1.55;
}
.news-card-text p { display: inline; }
.news-card-author { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: #7f8993; font-size: 7px; }
.news-card-author .news-author-avatar { width: 18px; height: 18px; flex-basis: 18px; font-size: 6px; }
.news-card-author button { border: 0; color: #d9dde1; font-size: 7px; background: transparent; cursor: pointer; }
.news-card-author button:hover { color: var(--red); text-decoration: underline; }
.news-card-author > span:last-child { display: inline-flex; align-items: center; gap: 4px; color: #ff5964; }
.news-card-author svg { width: 9px; height: 9px; }
.news-card-views { display: flex; align-items: center; justify-content: center; gap: 5px; color: #a5adb5; font-size: 8px; }
.news-card-views svg { width: 14px; height: 14px; color: #7e8994; }
.news-card-views strong { font-weight: 500; }
.news-card-views small { color: #697580; font-size: 6px; }
.news-card-menu-wrap { position: relative; display: grid; place-items: center; }
.news-more-button {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  color: #929ca5;
  background: #061019;
  cursor: pointer;
}
.news-more-button svg { width: 14px; height: 14px; }
.news-more-button:hover { color: #fff; border-color: rgba(255, 23, 39, .5); }
.news-card-menu {
  width: 145px;
  position: absolute;
  z-index: 45;
  top: 52px;
  right: 6px;
  padding: 5px;
  border: 1px solid rgba(255, 23, 39, .35);
  border-radius: 7px;
  background: #071016;
  box-shadow: 0 17px 42px rgba(0, 0, 0, .82);
}
.news-card-menu button { width: 100%; display: flex; align-items: center; gap: 7px; padding: 7px; border: 0; border-radius: 4px; color: #bdc3c9; font-size: 8px; text-align: left; background: transparent; cursor: pointer; }
.news-card-menu button svg { width: 12px; height: 12px; color: var(--red); }
.news-card-menu button:hover { color: #fff; background: var(--red-soft); }
.news-card-menu button.danger { color: #ff5964; }
.news-empty { min-height: 160px; display: grid; place-items: center; align-content: center; gap: 7px; border: 1px solid var(--border); border-radius: 7px; color: #697580; background: #040b10; }
.news-empty svg { width: 26px; height: 26px; color: var(--red); }
.news-empty strong { color: #aeb5bc; font-size: 11px; }
.news-empty span { font-size: 8px; }
.news-pagination {
  min-height: 42px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  color: #78838e;
  font-size: 7px;
}
.news-pagination label { display: inline-flex; align-items: center; gap: 6px; }
.news-pagination select { width: 62px; height: 26px; }
.news-pagination > span { justify-self: end; }
.news-page-buttons { display: flex; align-items: center; justify-content: center; gap: 4px; }
.news-page-buttons button {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #969fa8;
  font-size: 8px;
  background: transparent;
  cursor: pointer;
}
.news-page-buttons button:first-child, .news-page-buttons button:last-child { border-color: var(--border); background: #050d13; }
.news-page-buttons button.active { color: #fff; border-color: rgba(255, 23, 39, .5); background: linear-gradient(135deg, rgba(255, 23, 39, .54), rgba(255, 23, 39, .13)); }
.news-page-buttons button:disabled { opacity: .28; cursor: not-allowed; }
.news-page-buttons button svg { width: 13px; height: 13px; }
.news-page-buttons .next svg { transform: rotate(180deg); }
.news-page-ellipsis { width: 20px; text-align: center; }
.news-modal-backdrop {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 3, 5, .82);
  backdrop-filter: blur(7px);
}
.news-modal {
  --news-type-color: #d49a22;
  width: min(660px, 94vw);
  max-height: 86vh;
  position: relative;
  overflow-y: auto;
  padding: 25px;
  border: 1px solid color-mix(in srgb, var(--news-type-color) 48%, var(--border));
  border-radius: 11px;
  background: linear-gradient(145deg, #09131a, #03090d);
  box-shadow: 0 28px 100px rgba(0, 0, 0, .8), 0 0 30px color-mix(in srgb, var(--news-type-color) 10%, transparent);
}
.news-modal.important { --news-type-color: #ff2635; }
.news-modal.congratulation { --news-type-color: #8f55d9; }
.news-modal-close { width: 30px; height: 30px; position: absolute; top: 12px; right: 12px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 6px; color: #a8afb6; background: #061019; cursor: pointer; }
.news-modal-close svg { width: 15px; height: 15px; }
.news-modal-kicker { display: flex; align-items: center; gap: 8px; color: #7f8994; font-size: 8px; }
.news-modal h2 { margin: 14px 35px 12px 0; font-size: 20px; font-weight: 600; }
.news-modal-body { color: #bdc3c9; font-size: 11px; line-height: 1.7; }
.news-modal-body p { margin-bottom: 10px; }
.news-modal footer { display: flex; align-items: center; gap: 8px; margin-top: 20px; padding-top: 13px; border-top: 1px solid var(--border); color: #808b95; font-size: 8px; }
.news-modal footer strong { color: #e1e4e7; font-weight: 500; }
.news-modal-views { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; }
.news-modal-views svg { width: 13px; height: 13px; }

/* footer */
.footer {
  min-height: 103px;
  display: grid;
  grid-template-columns: minmax(300px, 1.02fr) minmax(520px, 2.25fr) 145px;
  align-items: center;
  gap: 12px;
  margin: 0 13px 12px;
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(5, 14, 19, .98), rgba(2, 8, 11, .98));
}
.footer-card.about { min-width: 0; display: flex; align-items: center; gap: 14px; }
.footer-card.about img { width: 76px; height: 72px; flex: 0 0 76px; border-radius: 8px; object-fit: cover; }
.about-copy { min-width: 0; }
.about-copy strong { display: block; color: #f0f1f2; font-size: 14px; font-weight: 400; }
.about-copy p { margin-top: 5px; color: #aab0b7; font-size: 10px; }
.about-copy small { display: block; margin-top: 6px; overflow: hidden; color: #707b86; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.footer-social { min-width: 0; display: grid; grid-template-columns: .86fr .86fr 1.5fr; gap: 10px; padding: 0 10px; border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
.social-card {
  min-width: 0;
  height: 59px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(5, 13, 18, .7);
  transition: border-color .15s ease, background .15s ease;
}
.social-card:hover { border-color: rgba(255, 23, 39, .45); background: var(--red-soft); }
.social-card > span:last-child { min-width: 0; }
.social-card strong { display: block; overflow: hidden; color: #e9eaec; font-size: 11px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.social-card small { display: block; margin-top: 4px; overflow: hidden; color: #8c959e; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.social-icon { width: 39px; flex: 0 0 39px; color: var(--red); font-size: 35px; line-height: 1; text-align: center; text-shadow: 0 0 14px rgba(255, 23, 39, .28); }
.telegram .social-icon { transform: rotate(-22deg); }
.rf-mark { color: var(--red); font-size: 24px; font-weight: 800; font-style: italic; letter-spacing: -.12em; text-shadow: 0 0 14px rgba(255, 23, 39, .22); }
.footer-status { display: flex; flex-direction: column; gap: 12px; color: #8c959e; font-size: 9px; }
.status-dot { display: flex; align-items: center; gap: 7px; color: #9da5ad; }
.status-dot i { width: 9px; height: 9px; display: inline-block; border-radius: 50%; background: var(--red); box-shadow: 0 0 9px rgba(255, 23, 39, .42); }
.toast {
  max-width: 360px;
  position: fixed;
  z-index: 100;
  right: 22px;
  bottom: 22px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 23, 39, .35);
  border-radius: 9px;
  color: #e8eaec;
  font-size: 12px;
  background: #091218;
  box-shadow: 0 16px 45px rgba(0, 0, 0, .65);
}
.toast.err { border-color: var(--red); }

@media (max-width: 1260px) {
  .app { gap: 12px; }
  :root { --sidebar-w: 220px; }
  .dashboard-lower { grid-template-columns: 1fr 1fr; }
  .dashboard-middle > .card,
  .dashboard-lower > .card { height: auto; min-height: 267px; }
  .dashboard-lower > .card:last-child { grid-column: 1 / -1; }
  .footer { grid-template-columns: minmax(270px, 1fr) minmax(430px, 1.8fr); }
  .footer-status { display: none; }
  .user-chip { min-width: 190px; }
  .playtime { min-width: 125px; }
}
@media (max-width: 1040px) {
  :root { --sidebar-w: 76px; }
  .sidebar-brand { padding-inline: 10px; }
  .sidebar-brand img { width: 52px; height: 60px; object-fit: cover; object-position: left center; }
  .nav-section, .nav-item span, .sidebar-collapse span { display: none; }
  .nav-item { justify-content: center; padding-inline: 8px; }
  .sidebar-collapse svg { transform: rotate(180deg); }
  .grid-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-middle { grid-template-columns: 1fr; }
  .topbar-right { gap: 7px; }
  .playtime { display: none; }
  .footer { grid-template-columns: 1fr; }
  .footer-social { border: 0; padding: 0; }
}
@media (max-width: 760px) {
  .app { display: block; padding: 0; }
  .sidebar { display: none; }
  .main { min-height: 100vh; border: 0; border-radius: 0; }
  .topbar { padding: 13px 14px; align-items: flex-start; }
  .topbar h1 { font-size: 17px; }
  .topbar-right { margin-left: auto; }
  .date-time, .clock-mark, .notification-button, .user-copy, .user-chevron { display: none; }
  .user-chip { min-width: 46px; width: 46px; height: 46px; display: block; padding: 1px; border: 0; background: transparent; }
  .avatar { width: 44px; height: 44px; }
  .user-dropdown { width: 150px; }
  .content { padding: 11px; }
  .grid-stats { grid-template-columns: 1fr; gap: 9px; }
  .stat-card { min-height: 112px; }
  .dashboard-lower { grid-template-columns: 1fr; }
  .dashboard-lower > .card:last-child { grid-column: auto; }
  .quick-grid { height: auto; grid-template-columns: repeat(2, 1fr); }
  .quick-btn { min-height: 125px; }
  .donut-wrap { grid-template-columns: 1fr; justify-items: center; }
  .legend { width: 100%; border-left: 0; border-top: 1px solid var(--border); }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .footer { margin: 0 11px 11px; grid-template-columns: 1fr; }
  .footer-social { grid-template-columns: 1fr; }
  .form-row, .command-strip, .stack-row { flex-direction: column; align-items: stretch; }
}

@media (max-width: 1260px) {
  .members-toolbar {
    grid-template-columns: minmax(230px, 285px) 1fr;
  }
  .member-found {
    grid-column: 1 / -1;
    justify-self: end;
  }
  .members-table-wrap {
    overflow-x: auto;
    overflow-y: visible;
  }
  .members-table { min-width: 1060px; }
}

@media (max-width: 1040px) {
  .members-toolbar {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .member-search { max-width: none; }
  .member-filter-chips { flex-wrap: wrap; }
  .member-found { grid-column: auto; justify-self: start; }
  .members-view .footer-status { display: flex; }
}

@media (max-width: 760px) {
  .members-view .topbar { display: flex; }
  .members-view .content { padding: 11px; }
  .members-heading { align-items: center; }
  .members-heading p { max-width: 220px; }
  .members-total { min-width: auto; }
  .members-total small { display: none; }
  .member-filter-chips button { flex: 1 1 calc(50% - 4px); }
  .members-pagination {
    grid-template-columns: 1fr auto;
  }
  .members-pages { grid-column: 1 / -1; justify-content: center; }
  .members-legend { margin-top: 10px; }
  .members-view .footer { grid-template-columns: 1fr auto; }
}

@media (max-width: 1260px) {
  .news-feed-toolbar { grid-template-columns: 1fr 126px auto 180px; }
  .news-compose-grid { grid-template-columns: 1.4fr .85fr 1fr; }
}

@media (max-width: 1040px) {
  .news-feed-toolbar { grid-template-columns: 1fr 130px auto; }
  .news-feed-search { grid-column: 1 / -1; }
  .news-feed-card { grid-template-columns: 62px minmax(0, 1fr) 82px 38px; }
  .news-card-views small { display: none; }
  .news-view .footer-status { display: flex; }
}

@media (max-width: 760px) {
  .news-view .topbar { display: flex; }
  .news-view .content { padding: 10px; }
  .news-center-heading { align-items: center; }
  .news-heading-account { display: none; }
  .news-heading-copy h2 { font-size: 16px; }
  .news-tabs-row { margin-inline: -10px; padding-inline: 10px; }
  .news-tabs { min-width: 0; overflow-x: auto; }
  .news-tabs button { min-width: max-content; padding-inline: 9px; }
  .news-create-button { flex: 0 0 auto; padding-inline: 9px; }
  .news-compose-grid { grid-template-columns: 1fr; }
  .news-feed-toolbar { grid-template-columns: 1fr auto; }
  .news-feed-title { grid-column: 1 / -1; }
  .news-feed-toolbar select { min-width: 0; }
  .news-feed-search { grid-column: 1 / -1; }
  .news-advanced-filters { grid-template-columns: 1fr; }
  .news-feed-card { grid-template-columns: 54px minmax(0, 1fr) 36px; }
  .news-card-views { grid-column: 2; justify-content: flex-start; padding: 0 11px 7px; }
  .news-card-menu-wrap { grid-column: 3; grid-row: 1 / span 2; }
  .news-card-title-row { flex-wrap: wrap; }
  .news-card-title-row h3 { width: 100%; }
  .news-pagination { grid-template-columns: 1fr auto; padding-top: 7px; }
  .news-page-buttons { grid-column: 1 / -1; grid-row: 2; }
  .news-view .footer { grid-template-columns: 1fr; }
  .news-view .footer-status { display: none; }
}

/* family bank terminal */
.bank-view .topbar { display: none; }
.bank-view .content { min-height: 0; padding: 10px 10px 8px; }
.bank-view .footer {
  min-height: 58px;
  grid-template-columns: 1fr auto;
  margin-bottom: 9px;
  padding-block: 6px;
}
.bank-view .footer-social { display: none; }
.bank-view .footer-status { display: flex; min-width: 150px; }
.bank-view .footer-card.about img { width: 43px; height: 42px; flex-basis: 43px; }
.bank-view .about-copy small { display: none; }
.bank-terminal {
  --bank-red: #ff2635;
  --bank-red-2: #c91422;
  --bank-red-soft: rgba(255, 38, 53, .12);
  width: 100%;
  min-width: 0;
  color: #e9ebee;
}
.bank-heading {
  min-height: 45px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 0 3px 7px;
}
.bank-heading-copy { display: flex; align-items: flex-start; gap: 10px; }
.bank-heading-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--bank-red);
  background: var(--bank-red-soft);
  box-shadow: 0 0 18px rgba(255, 38, 53, .13);
}
.bank-heading-icon svg { width: 23px; height: 23px; }
.bank-heading h2 { font-size: 19px; line-height: 1.15; font-weight: 600; }
.bank-heading p { margin-top: 4px; color: #858f99; font-size: 8px; }
.bank-account { height: 34px; display: flex; align-items: center; gap: 7px; color: #89939d; font-size: 8px; }
.bank-account > span { display: inline-flex; align-items: center; gap: 4px; padding-right: 4px; }
.bank-account > span svg { width: 11px; height: 11px; }
.bank-account-avatar {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 38, 53, .32);
  border-radius: 50%;
  color: #fff;
  font-weight: 600;
  background: radial-gradient(circle at 65% 35%, #ff2635 0 2px, transparent 3px), linear-gradient(145deg, #282b2e, #07090a 55%, #48080e);
  box-shadow: inset 0 0 12px #000, 0 0 14px rgba(255, 38, 53, .08);
}
.bank-account strong { display: block; color: #e9ebed; font-size: 9px; font-weight: 500; }
.bank-account small { display: block; margin-top: 1px; color: var(--bank-red); font-size: 7px; }
.bank-account > svg { width: 12px; height: 12px; color: #707b85; }
.bank-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}
.bank-summary-card {
  min-height: 90px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px 11px;
  border: 1px solid rgba(139, 164, 181, .12);
  border-radius: 8px;
  background:
    radial-gradient(circle at 17% 10%, rgba(255, 38, 53, .045), transparent 40%),
    linear-gradient(145deg, #071018, #03090e 75%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .012);
}
.bank-stat-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: var(--bank-red);
  background: rgba(255, 38, 53, .11);
  box-shadow: 0 0 16px rgba(255, 38, 53, .08);
}
.bank-stat-icon svg { width: 23px; height: 23px; }
.bank-summary-card small { display: block; color: #8d96a0; font-size: 7px; letter-spacing: .02em; }
.bank-summary-card strong { display: block; margin-top: 5px; color: #f0f1f3; font-size: 16px; line-height: 1; font-weight: 600; }
.bank-summary-card p { margin-top: 7px; color: #777f89; font-size: 7px; }
.bank-summary-card em { display: block; margin-top: 7px; color: #9ba4ad; font-size: 7px; font-style: normal; }
.bank-summary-card.balance strong,
.bank-summary-card.deposit strong,
.bank-summary-card.operations strong,
.bank-summary-card em.positive { color: #ff5360; }
.bank-summary-card.withdraw strong,
.bank-summary-card em.negative { color: #ff2635; }
.bank-summary-card.deposit .bank-stat-icon { color: #ff6570; background: rgba(255, 38, 53, .08); }
.bank-summary-card.withdraw .bank-stat-icon { color: #ff2635; background: rgba(255, 38, 53, .14); }
.bank-summary-card.operations .bank-stat-icon { color: #ff7c85; background: rgba(255, 38, 53, .08); }
.bank-workspace, .bank-lower { display: grid; gap: 8px; margin-bottom: 8px; }
.bank-workspace { grid-template-columns: minmax(0, .86fr) minmax(420px, 1.14fr); }
.bank-lower { grid-template-columns: minmax(610px, 1.55fr) minmax(330px, .95fr); margin-bottom: 0; }
.bank-panel {
  min-width: 0;
  border: 1px solid rgba(139, 164, 181, .12);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(5, 13, 20, .96), rgba(2, 8, 13, .98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .01);
}
.bank-panel > header { min-height: 34px; display: flex; align-items: center; gap: 8px; padding: 7px 10px; }
.bank-panel > header h3 { margin-right: auto; color: #d8dce0; font-size: 8px; font-weight: 600; letter-spacing: .025em; }
.bank-range-tabs { display: flex; align-items: center; gap: 3px; }
.bank-range-tabs button {
  height: 25px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #7f8993;
  font-size: 7px;
  background: transparent;
  cursor: pointer;
}
.bank-range-tabs button:hover { color: #fff; }
.bank-range-tabs button.active { color: #fff; border-color: rgba(255, 38, 53, .55); background: rgba(255, 38, 53, .12); box-shadow: 0 0 13px rgba(255, 38, 53, .07); }
.bank-movement { min-height: 259px; position: relative; overflow: hidden; }
.bank-chart-legend { position: absolute; z-index: 2; top: 41px; right: 15px; display: flex; gap: 13px; color: #929ba5; font-size: 7px; }
.bank-chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.bank-chart-legend i { width: 6px; height: 6px; border-radius: 50%; background: #ff5360; box-shadow: 0 0 7px rgba(255, 38, 53, .28); }
.bank-chart-legend .withdraw i { background: #9e151f; }
.bank-chart { width: 100%; height: 214px; overflow: visible; }
.bank-chart-grid line { stroke: rgba(139, 164, 181, .09); stroke-width: 1; vector-effect: non-scaling-stroke; }
.bank-chart-grid text, .bank-chart-labels text { fill: #67727d; font-size: 8px; font-family: var(--font); }
.bank-chart-area { fill: url(#bank-area); stroke: none; }
.bank-chart-deposit, .bank-chart-withdraw { fill: none; vector-effect: non-scaling-stroke; }
.bank-chart-deposit { stroke: #ff5360; stroke-width: 1.7; filter: drop-shadow(0 0 4px rgba(255, 38, 53, .25)); }
.bank-chart-withdraw { stroke: #9e151f; stroke-width: 1.5; }
.bank-chart-dot { stroke-width: 1; vector-effect: non-scaling-stroke; }
.bank-chart-dot.deposit { fill: #ff5360; stroke: #ffb0b5; }
.bank-chart-dot.withdraw { fill: #b51c27; stroke: #ff6974; }
.bank-operation { min-height: 259px; }
.bank-operation > header > span { color: #7c858f; font-size: 7px; }
.bank-operation.readonly { opacity: .72; }
.bank-op-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 0 10px 8px; }
.bank-op-mode {
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #44212a;
  border-radius: 5px;
  color: #9aa2aa;
  font-size: 8px;
  background: #090d12;
  cursor: pointer;
}
.bank-op-mode svg { width: 13px; height: 13px; }
.bank-op-mode.active { color: #fff; border-color: rgba(255, 38, 53, .62); background: linear-gradient(180deg, rgba(255, 38, 53, .28), rgba(94, 9, 17, .28)); box-shadow: inset 0 0 13px rgba(255, 38, 53, .08), 0 0 12px rgba(255, 38, 53, .05); }
.bank-op-mode.withdraw.active { border-color: rgba(255, 38, 53, .78); background: linear-gradient(180deg, rgba(255, 38, 53, .34), rgba(86, 5, 13, .36)); }
.bank-op-form { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 9px; padding: 0 10px 7px; }
.bank-op-form label { min-width: 0; color: #858e98; font-size: 7px; }
.bank-op-form label.wide { grid-column: 1 / -1; }
.bank-op-form input, .bank-op-form select {
  width: 100%;
  height: 28px;
  margin-top: 4px;
  padding: 0 9px;
  border: 1px solid rgba(139, 164, 181, .15);
  border-radius: 5px;
  outline: 0;
  color: #d8dce0;
  font-size: 7px;
  background: #040a0f;
}
.bank-op-form input:focus, .bank-op-form select:focus { border-color: rgba(255, 38, 53, .58); box-shadow: 0 0 0 2px rgba(255, 38, 53, .04); }
.bank-op-form input::placeholder { color: #59646e; }
.bank-amount-input { position: relative; }
.bank-amount-input span { position: absolute; z-index: 1; left: 9px; top: 10px; color: #7d8791; font-size: 8px; }
.bank-amount-input input { padding-left: 20px; }
.bank-quick-amounts { align-self: end; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding-bottom: 0; }
.bank-quick-amounts button { height: 28px; border: 1px solid rgba(139, 164, 181, .12); border-radius: 5px; color: #7f8992; font-size: 7px; background: #050b10; cursor: pointer; }
.bank-quick-amounts button:hover { color: #fff; border-color: rgba(255, 38, 53, .4); }
.bank-balance-preview {
  min-height: 43px;
  display: grid;
  grid-template-columns: 1fr auto .7fr auto 1.15fr 1.35fr;
  align-items: center;
  gap: 7px;
  margin: 0 10px 9px;
  padding: 6px 7px;
  border: 1px solid rgba(139, 164, 181, .12);
  border-radius: 6px;
  background: #03090e;
}
.bank-balance-preview > span { min-width: 0; color: #707a84; font-size: 6px; }
.bank-balance-preview strong { display: block; margin-top: 2px; overflow: hidden; color: #dce0e3; font-size: 8px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.bank-balance-preview span:nth-of-type(3) strong { color: #ff5360; }
.bank-balance-preview strong.negative { color: #ff2635 !important; }
.bank-balance-preview > i { color: #4f5963; font-size: 9px; font-style: normal; }
.bank-balance-preview button {
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(255, 38, 53, .58);
  border-radius: 5px;
  color: #fff;
  font-size: 7px;
  background: linear-gradient(135deg, rgba(255, 38, 53, .63), rgba(111, 8, 17, .68));
  box-shadow: 0 0 14px rgba(255, 38, 53, .1);
  cursor: pointer;
}
.bank-balance-preview button svg { width: 12px; height: 12px; }
.bank-balance-preview button:hover { filter: brightness(1.12); }
.bank-balance-preview button:disabled { opacity: .35; cursor: not-allowed; }
.bank-lower { min-height: 247px; }
.bank-history { min-height: 247px; display: flex; flex-direction: column; overflow: hidden; }
.bank-history > header { flex-wrap: nowrap; }
.bank-history-search {
  width: min(190px, 27%);
  height: 27px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border: 1px solid rgba(139, 164, 181, .13);
  border-radius: 5px;
  background: #03090e;
}
.bank-history-search:focus-within { border-color: rgba(255, 38, 53, .5); }
.bank-history-search svg { width: 12px; height: 12px; color: #737e88; }
.bank-history-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: #d5d9dd; font-size: 7px; background: transparent; }
.bank-history select { height: 27px; padding: 0 24px 0 8px; border: 1px solid rgba(139, 164, 181, .13); border-radius: 5px; outline: 0; color: #9aa2aa; font-size: 7px; background: #03090e; }
.bank-filter-button { height: 27px; display: flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid rgba(255, 38, 53, .4); border-radius: 5px; color: #d9dde0; font-size: 7px; background: rgba(255, 38, 53, .09); }
.bank-filter-button svg { width: 11px; height: 11px; color: var(--bank-red); }
.bank-history-scroll { flex: 1; min-height: 0; overflow-x: auto; }
.bank-history table { width: 100%; min-width: 790px; border-collapse: collapse; table-layout: fixed; font-size: 7px; }
.bank-history th, .bank-history td { height: 33px; padding: 5px 7px; border-bottom: 1px solid rgba(139, 164, 181, .09); text-align: left; vertical-align: middle; }
.bank-history th { height: 28px; color: #7c8791; font-size: 6px; font-weight: 500; }
.bank-history th:nth-child(1) { width: 13%; }
.bank-history th:nth-child(2) { width: 14%; }
.bank-history th:nth-child(3) { width: 22%; }
.bank-history th:nth-child(4), .bank-history th:nth-child(5) { width: 13%; }
.bank-history th:nth-child(6) { width: 14%; }
.bank-history th:nth-child(7) { width: 12%; }
.bank-history th:nth-child(8) { width: 9%; }
.bank-history td { color: #9da5ad; white-space: nowrap; }
.bank-history td strong { display: block; overflow: hidden; color: #d1d5d9; font-size: 7px; font-weight: 500; text-overflow: ellipsis; }
.bank-history td code { color: #727d87; font-size: 6px; font-family: var(--font); }
.bank-history td time { color: #818b95; font-size: 6px; }
.bank-tx-type { display: inline-flex; align-items: center; gap: 6px; }
.bank-tx-type svg { width: 13px; height: 13px; }
.bank-tx-type.deposit, .bank-amount.deposit { color: #ff5965; }
.bank-tx-type.withdraw, .bank-amount.withdraw { color: #ff2635; }
.bank-tx-type.adjustment { color: #b9bec4; }
.bank-amount { font-weight: 600; }
.bank-performer { display: block; overflow: hidden; color: #d3d7da; font-size: 7px; text-overflow: ellipsis; }
.bank-performer + small { display: block; overflow: hidden; margin-top: 2px; color: #6c7781; font-size: 6px; text-overflow: ellipsis; }
.bank-empty-row { height: 76px !important; color: #727c86 !important; text-align: center !important; }
.bank-pagination { min-height: 37px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 5px 9px; color: #737e88; font-size: 6px; }
.bank-pagination label { display: flex; align-items: center; gap: 5px; }
.bank-pagination label select { width: 43px; height: 24px; padding: 0 5px; }
.bank-pagination > div { display: flex; align-items: center; gap: 4px; }
.bank-pagination button { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 5px; color: #949da6; font-size: 7px; background: transparent; cursor: pointer; }
.bank-pagination button svg { width: 11px; height: 11px; }
.bank-pagination button:first-child, .bank-pagination button:last-child { border-color: rgba(139, 164, 181, .12); background: #050c11; }
.bank-pagination button.next svg { transform: rotate(180deg); }
.bank-pagination button.active { color: #fff; border-color: rgba(255, 38, 53, .5); background: rgba(255, 38, 53, .24); box-shadow: 0 0 10px rgba(255, 38, 53, .09); }
.bank-pagination button:disabled { opacity: .28; cursor: not-allowed; }
.bank-analytics { min-width: 0; display: grid; grid-template-rows: 1.05fr .95fr; gap: 8px; }
.bank-expenses { min-height: 0; }
.bank-donut-wrap { min-height: 113px; display: grid; grid-template-columns: 124px 1fr; align-items: center; gap: 4px; padding: 0 10px 9px; }
.bank-donut { width: 96px; height: 96px; position: relative; display: grid; place-items: center; margin: auto; border-radius: 50%; background: var(--bank-donut); box-shadow: 0 0 18px rgba(255, 38, 53, .07); }
.bank-donut::after { width: 59px; height: 59px; content: ""; position: absolute; border-radius: 50%; background: #050c11; box-shadow: inset 0 0 16px rgba(0, 0, 0, .9); }
.bank-donut span { position: relative; z-index: 1; text-align: center; }
.bank-donut strong { display: block; color: #eef0f2; font-size: 8px; font-weight: 500; }
.bank-donut small { display: block; margin-top: 2px; color: #78828c; font-size: 6px; }
.bank-expense-legend { min-width: 0; display: grid; gap: 5px; }
.bank-expense-legend p { display: grid; grid-template-columns: 7px 1fr 25px auto; align-items: center; gap: 5px; color: #8c959e; font-size: 6px; }
.bank-expense-legend p i { width: 7px; height: 7px; border-radius: 2px; }
.bank-expense-legend p b { color: #b4bac0; font-weight: 500; text-align: right; }
.bank-expense-legend p em { color: #777f88; font-style: normal; white-space: nowrap; }
.bank-rankings { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bank-rankings .bank-panel { min-height: 0; display: flex; flex-direction: column; }
.bank-rankings ol { flex: 1; list-style: none; padding: 0 9px 3px; }
.bank-rankings li { min-height: 16px; display: grid; grid-template-columns: 15px 1fr auto; align-items: center; gap: 4px; color: #9aa2aa; font-size: 6px; }
.bank-rankings li i { color: #747e87; font-style: normal; text-align: center; }
.bank-rankings li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bank-rankings li b { color: #bcc2c7; font-size: 6px; font-weight: 500; white-space: nowrap; }
.bank-rankings li:first-child i, .bank-rankings li:first-child b { color: #ff5965; }
.bank-rankings li.empty-item { grid-template-columns: 1fr; color: #67727c; text-align: center; }
.bank-rankings article > footer { min-height: 20px; padding: 4px 9px; color: #66717b; font-size: 6px; }

@media (max-width: 1180px) {
  .bank-workspace, .bank-lower { grid-template-columns: 1fr; }
  .bank-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bank-lower { min-height: 0; }
  .bank-analytics { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .bank-history { min-height: 300px; }
}
@media (max-width: 760px) {
  .bank-view .topbar { display: flex; }
  .bank-view .content { padding: 9px; }
  .bank-view .footer { grid-template-columns: 1fr; }
  .bank-view .footer-status { display: none; }
  .bank-heading { align-items: center; }
  .bank-account > span, .bank-account > div:not(.bank-account-avatar), .bank-account > svg { display: none; }
  .bank-summary-grid { grid-template-columns: 1fr; }
  .bank-summary-card { min-height: 82px; }
  .bank-workspace { display: block; }
  .bank-movement { margin-bottom: 8px; }
  .bank-op-form { grid-template-columns: 1fr; }
  .bank-op-form label.wide { grid-column: auto; }
  .bank-quick-amounts { grid-template-columns: repeat(2, 1fr); }
  .bank-balance-preview { grid-template-columns: 1fr auto 1fr; }
  .bank-balance-preview span:nth-of-type(3), .bank-balance-preview > i:nth-of-type(2) { display: none; }
  .bank-balance-preview button { grid-column: 1 / -1; }
  .bank-history > header { flex-wrap: wrap; }
  .bank-history > header h3 { width: 100%; }
  .bank-history-search { width: 100%; }
  .bank-analytics { grid-template-columns: 1fr; }
  .bank-rankings { grid-template-columns: 1fr; }
  .bank-pagination { grid-template-columns: 1fr auto; }
  .bank-pagination > div { grid-column: 1 / -1; justify-content: center; }
}

/* Fujita Market — reference variant 2 in the common black/red identity */
.market-view { background: #010305; }
.market-view .app { display: block; padding: 0; }
.market-view .sidebar, .market-view .topbar, .market-view .footer { display: none; }
.market-view .main {
  min-height: 100vh;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 76% 0, rgba(255, 23, 39, .035), transparent 28%),
    linear-gradient(145deg, #010305, #03070b 48%, #010305);
}
.market-view .content { padding: 17px 22px; }
.market-terminal {
  --market-red: #ff2635;
  --market-red-bright: #ff4d59;
  --market-red-soft: rgba(255, 38, 53, .11);
  --market-panel: rgba(5, 11, 16, .96);
  --market-line: rgba(142, 160, 174, .15);
  min-width: 0;
  color: #e6e8eb;
}
.market-terminal button, .market-terminal input, .market-terminal select, .market-terminal textarea { font-family: inherit; }
.market-terminal-head {
  height: 77px;
  display: grid;
  grid-template-columns: 170px minmax(480px, 670px) 200px 76px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.market-brand {
  width: 162px;
  height: 70px;
  position: relative;
  display: block;
  border: 0;
  color: #fff;
  text-align: left;
  background: transparent;
  cursor: pointer;
}
.market-logo-crop { width: 145px; height: 38px; display: block; overflow: hidden; }
.market-logo-crop img { width: 188px; max-width: none; transform: translate(-62px, -3px); }
.market-brand > b { display: block; margin: 1px 0 0 17px; color: var(--market-red); font-size: 10px; line-height: 1; font-weight: 600; letter-spacing: .55em; }
.market-brand > small { display: block; margin-top: 7px; color: #777f89; font-size: 8px; white-space: nowrap; }
.market-head-stats {
  height: 64px;
  display: grid;
  grid-template-columns: 1.05fr 1fr 1fr .85fr;
  border: 1px solid var(--market-line);
  border-radius: 6px;
  background: linear-gradient(145deg, rgba(7, 13, 19, .96), rgba(3, 8, 12, .98));
}
.market-head-stats > span { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 20px; border-right: 1px solid rgba(142, 160, 174, .11); }
.market-head-stats > span:last-child { border-right: 0; }
.market-head-stats small { color: #9ca3ac; font-size: 7px; white-space: nowrap; }
.market-head-stats strong { margin-top: 7px; overflow: hidden; color: #eef0f2; font-size: 16px; line-height: 1; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.market-head-stats em { margin-top: 3px; color: #818a94; font-size: 6px; font-style: normal; }
.market-create-button {
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(255, 38, 53, .72);
  border-radius: 5px;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  background: linear-gradient(135deg, rgba(255, 38, 53, .73), rgba(126, 7, 17, .84));
  box-shadow: 0 0 25px rgba(255, 38, 53, .12), inset 0 1px 0 rgba(255, 255, 255, .08);
  cursor: pointer;
}
.market-create-button svg { width: 15px; height: 15px; }
.market-create-button:hover { filter: brightness(1.12); }
.market-family-mark { height: 64px; display: flex; align-items: center; gap: 8px; padding-left: 13px; border-left: 1px solid var(--market-line); }
.market-family-mark strong { color: rgba(255, 38, 53, .27); font-family: serif; font-size: 39px; line-height: 1; }
.market-family-mark span { color: #626b75; font-size: 8px; letter-spacing: .08em; }
.market-top-nav {
  height: 45px;
  display: grid;
  grid-template-columns: repeat(8, minmax(95px, 1fr));
  margin: 1px 0 12px;
  overflow-x: auto;
  border: 1px solid var(--market-line);
  border-radius: 5px;
  background: linear-gradient(180deg, #070d12, #04090d);
}
.market-top-nav button {
  min-width: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-right: 1px solid rgba(142, 160, 174, .06);
  color: #a2a9b1;
  font-size: 9px;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
}
.market-top-nav button svg { width: 18px; height: 18px; }
.market-top-nav button:hover { color: #fff; background: rgba(255, 38, 53, .04); }
.market-top-nav button.active { color: #fff; border-inline: 1px solid rgba(255, 38, 53, .48); background: linear-gradient(180deg, rgba(255, 38, 53, .23), rgba(91, 7, 15, .26)); box-shadow: inset 0 -2px 0 var(--market-red), 0 0 20px rgba(255, 38, 53, .08); }
.market-main-grid { min-width: 0; display: grid; grid-template-columns: 236px minmax(0, 1fr) 270px; gap: 10px; }
.market-left, .market-right { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.market-side-card, .market-premium, .market-catalog, .market-statistics, .market-logs {
  border: 1px solid var(--market-line);
  border-radius: 5px;
  background: linear-gradient(145deg, rgba(6, 12, 18, .97), rgba(3, 8, 12, .98));
}
.market-side-card > h2, .market-premium > h2 { min-height: 37px; display: flex; align-items: center; gap: 7px; padding: 0 15px; color: #d7dade; font-size: 9px; font-weight: 600; }
.market-side-card > h2 svg, .market-premium > h2 svg { width: 15px; height: 15px; color: var(--market-red); }
.market-categories { overflow: hidden; }
.market-categories > h2 { color: #ff6973; }
.market-categories > button {
  width: 100%;
  height: 39px;
  display: grid;
  grid-template-columns: 19px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  border: 0;
  border-top: 1px solid rgba(142, 160, 174, .07);
  color: #afb5bc;
  font-size: 8px;
  text-align: left;
  background: transparent;
  cursor: pointer;
}
.market-categories > button svg { width: 16px; height: 16px; color: #a6adb5; }
.market-categories > button b { color: #c9cdd2; font-size: 8px; font-weight: 500; }
.market-categories > button:hover { color: #fff; background: rgba(255, 38, 53, .035); }
.market-categories > button.active { color: #fff; background: linear-gradient(90deg, rgba(255, 38, 53, .36), rgba(255, 38, 53, .09)); box-shadow: inset 3px 0 0 var(--market-red); }
.market-categories > button.active svg, .market-categories > button.active b { color: #fff; }
.market-premium { padding-bottom: 12px; border-color: rgba(255, 38, 53, .34); background: radial-gradient(circle at 45% 30%, rgba(255, 38, 53, .1), transparent 58%), linear-gradient(145deg, #080d13, #08070b); }
.market-premium > h2 { color: #ff727c; }
.market-premium p { min-height: 67px; padding: 8px 18px; color: #929aa4; font-size: 8px; line-height: 1.8; }
.market-premium p::before { content: "⌁"; margin-right: 12px; color: var(--market-red); font-size: 23px; vertical-align: middle; }
.market-premium button, .market-best-sellers > button, .market-radar-panel > button { width: calc(100% - 24px); height: 34px; margin: 0 12px; border: 1px solid rgba(255, 38, 53, .4); border-radius: 4px; color: #ff949b; font-size: 8px; background: rgba(255, 38, 53, .09); cursor: pointer; }
.market-premium button:hover, .market-best-sellers > button:hover, .market-radar-panel > button:hover { color: #fff; border-color: var(--market-red); }
.market-price-filter { padding-bottom: 12px; }
.market-price-filter > h2 { min-height: 37px; border-top: 1px solid rgba(142, 160, 174, .08); }
.market-price-filter > h2:first-child { border-top: 0; }
.market-price-filter > label { height: 33px; display: flex; align-items: center; gap: 8px; margin: 0 12px 10px; padding: 0 10px; border: 1px solid var(--market-line); border-radius: 4px; background: #03080c; }
.market-price-filter > label svg { width: 14px; height: 14px; color: #78828d; }
.market-price-filter > label input { width: 100%; min-width: 0; border: 0; outline: 0; color: #dce0e4; font-size: 8px; background: transparent; }
.market-price-filter > div { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 0 12px; }
.market-price-filter > div label { color: #737d87; font-size: 7px; }
.market-price-filter > div input, .market-price-filter select { width: 100%; height: 33px; margin-top: 5px; padding: 0 10px; border: 1px solid var(--market-line); border-radius: 4px; outline: 0; color: #d7dbe0; font-size: 8px; background: #03080d; }
.market-price-range { width: calc(100% - 28px); height: 3px; margin: 18px 14px 5px; accent-color: var(--market-red); }
.market-price-filter > select { width: calc(100% - 24px); margin: 0 12px; }
.market-catalog { min-width: 0; padding: 10px; }
.market-catalog-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 142px 121px;
  gap: 9px;
  margin-bottom: 11px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(142, 160, 174, .1);
}
.market-main-search { height: 34px; display: flex; align-items: center; gap: 9px; padding: 0 11px; border: 1px solid var(--market-line); border-radius: 4px; background: #03080d; }
.market-main-search:focus-within { border-color: rgba(255, 38, 53, .5); }
.market-main-search svg { width: 15px; height: 15px; color: #858f99; }
.market-main-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: #e2e5e8; font-size: 8px; background: transparent; }
.market-catalog-toolbar select { height: 34px; padding: 0 9px; border: 1px solid var(--market-line); border-radius: 4px; outline: 0; color: #b2b8bf; font-size: 8px; background: #040a0f; }
.market-filter-trigger { height: 34px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--market-line); border-radius: 4px; color: #c0c5ca; font-size: 8px; background: #050b10; }
.market-filter-trigger svg { width: 14px; height: 14px; color: var(--market-red); }
.market-feature-chips { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
.market-feature-chips button { height: 31px; display: flex; align-items: center; gap: 6px; padding: 0 13px; border: 1px solid var(--market-line); border-radius: 4px; color: #a5adb5; font-size: 8px; background: #050b10; cursor: pointer; }
.market-feature-chips button svg { width: 13px; height: 13px; }
.market-feature-chips button:hover { color: #fff; border-color: rgba(255, 38, 53, .34); }
.market-feature-chips button.active { color: #fff; border-color: rgba(255, 38, 53, .52); background: rgba(255, 38, 53, .18); box-shadow: 0 0 12px rgba(255, 38, 53, .07); }
.market-products { min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.market-product-card {
  min-width: 0;
  height: 278px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(142, 160, 174, .17);
  border-radius: 4px;
  background:
    radial-gradient(circle at 50% 23%, rgba(255, 38, 53, .08), transparent 33%),
    linear-gradient(155deg, #08111a, #050b11 63%, #07090d);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.market-product-card:hover { transform: translateY(-2px); border-color: rgba(255, 38, 53, .5); box-shadow: 0 8px 28px rgba(0, 0, 0, .34), 0 0 18px rgba(255, 38, 53, .06); }
.market-product-art { height: 73px; position: relative; display: grid; place-items: center; }
.market-product-art::before { width: 58px; height: 58px; content: ""; position: absolute; transform: rotate(30deg); border: 1px solid rgba(255, 38, 53, .25); background: rgba(255, 38, 53, .07); box-shadow: inset 0 0 20px rgba(255, 38, 53, .08), 0 0 18px rgba(255, 38, 53, .05); }
.market-product-art > span { width: 42px; height: 42px; z-index: 1; display: grid; place-items: center; border-radius: 8px; color: #ff5b66; background: rgba(255, 38, 53, .12); }
.market-product-art svg { width: 29px; height: 29px; stroke-width: 1.6; }
.market-product-body { flex: 1; min-height: 0; padding: 5px 13px 9px; }
.market-product-body h3 { overflow: hidden; color: #f0f1f2; font-size: 11px; line-height: 1.2; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.market-product-body > small { display: block; margin-top: 5px; color: #747f89; font-size: 7px; }
.market-product-body > p { margin-top: 10px; color: #929ba4; font-size: 8px; }
.market-product-body > p strong { color: #d6dade; font-weight: 600; }
.market-product-price { margin-top: 10px; color: #f0f1f3; font-size: 14px; font-weight: 500; white-space: nowrap; }
.market-product-price small { color: #8c959e; font-size: 7px; }
.market-product-flag { max-width: 100%; height: 24px; display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; padding: 0 7px; overflow: hidden; border: 1px solid rgba(255, 38, 53, .25); border-radius: 4px; color: #ff7a83; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; background: rgba(255, 38, 53, .08); }
.market-product-flag svg { width: 11px; height: 11px; flex: 0 0 11px; }
.market-product-flag.hot { color: #ff936b; border-color: rgba(255, 75, 38, .28); background: rgba(255, 66, 38, .08); }
.market-product-flag.deficit { color: #ffba77; border-color: rgba(255, 120, 38, .3); background: rgba(255, 100, 38, .07); }
.market-product-flag.new { color: #c4c9ce; border-color: var(--market-line); background: rgba(255, 255, 255, .025); }
.market-product-card > footer { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 10px 8px 13px; border-top: 1px solid rgba(142, 160, 174, .1); }
.market-product-card > footer > div { min-width: 0; }
.market-product-card > footer span { display: block; overflow: hidden; color: #9ea6ae; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.market-product-card > footer strong { display: block; margin-top: 4px; color: #ff535f; font-size: 8px; font-weight: 500; }
.market-product-card > footer strong small { color: #737d86; font-size: 6px; }
.market-product-card > footer button { min-width: 62px; height: 29px; border: 1px solid rgba(255, 38, 53, .38); border-radius: 4px; color: #ff939b; font-size: 7px; background: rgba(255, 38, 53, .08); cursor: pointer; }
.market-product-card > footer button:hover { color: #fff; border-color: var(--market-red); background: rgba(255, 38, 53, .18); }
.market-show-more { width: 100%; height: 33px; display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 11px; border: 1px solid var(--market-line); border-radius: 4px; color: #ff8f97; font-size: 8px; background: linear-gradient(180deg, #081016, #050b10); cursor: pointer; }
.market-show-more svg { width: 13px; height: 13px; }
.market-show-more:disabled { color: #737d86; cursor: default; }
.market-empty-catalog { min-height: 566px; grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #6f7983; }
.market-empty-catalog svg { width: 32px; height: 32px; color: #9c1b25; }
.market-empty-catalog strong { color: #aeb4ba; font-size: 11px; }
.market-empty-catalog span { font-size: 8px; }
.market-statistics { min-height: 102px; margin-top: 12px; padding: 11px 16px; }
.market-statistics > h2 { display: flex; align-items: center; gap: 8px; color: #d5d9dd; font-size: 9px; }
.market-statistics > h2 svg { width: 14px; height: 14px; color: var(--market-red); }
.market-statistics > div { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 12px; }
.market-statistics > div > span { min-width: 0; position: relative; display: grid; grid-template-columns: 24px 1fr auto; grid-template-rows: auto auto; align-items: center; padding: 0 19px; border-right: 1px solid var(--market-line); }
.market-statistics > div > span:first-child { padding-left: 0; }
.market-statistics > div > span:last-child { padding-right: 0; border-right: 0; }
.market-statistics > div > span > svg { grid-row: 1 / 3; width: 15px; height: 15px; color: #9ca4ac; }
.market-statistics > div > span > small { color: #8f98a1; font-size: 7px; }
.market-statistics > div > span > strong { margin-top: 6px; color: #e8eaec; font-size: 17px; line-height: 1; font-weight: 500; }
.market-statistics > div > span > em { grid-column: 3; grid-row: 1 / 3; color: #ff5b66; font-size: 9px; font-style: normal; }
.market-statistics > div > span > em small { display: block; margin-top: 3px; color: #747e88; font-size: 6px; }
.market-best-sellers { padding-bottom: 11px; }
.market-best-sellers > h2, .market-radar-panel > h2 { color: #ff7881; }
.market-best-sellers ol { list-style: none; padding: 0 10px 8px; }
.market-best-sellers li { min-height: 52px; display: grid; grid-template-columns: 22px 32px minmax(0, 1fr) auto; align-items: center; gap: 6px; margin-bottom: 5px; padding: 5px 7px; border: 1px solid rgba(142, 160, 174, .1); border-radius: 4px; background: rgba(255, 255, 255, .012); }
.market-best-sellers li > i { width: 22px; height: 31px; display: grid; place-items: center; border-radius: 4px; color: #c0c5ca; font-size: 8px; font-style: normal; background: #0c131a; }
.market-best-sellers li:first-child > i { color: #fff; background: rgba(255, 38, 53, .32); }
.market-seller-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 6px; color: #ff6470; background: rgba(255, 38, 53, .11); }
.market-seller-icon svg { width: 18px; height: 18px; }
.market-best-sellers li > div { min-width: 0; }
.market-best-sellers li strong { display: block; overflow: hidden; color: #e1e4e7; font-size: 8px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.market-best-sellers li small { display: block; margin-top: 5px; color: #6e7983; font-size: 6px; white-space: nowrap; }
.market-best-sellers li > b { color: #ff6670; font-size: 8px; font-weight: 500; white-space: nowrap; }
.market-no-sellers { display: block !important; padding-top: 18px !important; color: #707a84; text-align: center; }
.market-radar-panel { padding-bottom: 11px; }
.market-radar-card { min-height: 103px; position: relative; margin: 0 10px 9px; padding: 11px; overflow: hidden; border: 1px solid rgba(255, 38, 53, .24); border-radius: 5px; background: radial-gradient(circle at 87% 70%, rgba(255, 38, 53, .09), transparent 42%), #060d12; }
.market-radar-card > header { display: flex; align-items: center; gap: 7px; color: #ff6973; font-size: 7px; }
.market-radar-card > header svg { width: 13px; height: 13px; }
.market-radar-card > div { width: 63%; position: relative; z-index: 1; margin-top: 9px; }
.market-radar-card h4 { overflow: hidden; color: #e3e6e9; font-size: 10px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.market-radar-card b { display: block; margin-top: 6px; color: #f1f2f4; font-size: 10px; font-weight: 500; }
.market-radar-card b small { color: #7e8892; font-size: 6px; }
.market-radar-card p { margin-top: 6px; color: #ff7079; font-size: 7px; }
.market-spark { width: 84px; height: 32px; position: absolute; right: 7px; bottom: 14px; }
.market-spark path { fill: none; stroke: #ff3744; stroke-width: 1.5; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px rgba(255, 38, 53, .28)); }
.market-radar-card.hot { border-color: rgba(255, 80, 38, .25); }
.market-radar-card.hot > header, .market-radar-card.hot p { color: #ff8a63; }
.market-radar-card.hot .market-spark path { stroke: #ff7045; }
.market-radar-card.deficit { border-color: rgba(255, 38, 53, .38); }
.market-radar-empty { min-height: 110px; display: grid; place-items: center; color: #6f7983; font-size: 8px; }
.market-logs { min-height: 617px; overflow: hidden; }
.market-logs > header { height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 17px; border-bottom: 1px solid var(--market-line); }
.market-logs h2 { font-size: 12px; }
.market-logs p { margin-top: 4px; color: #747e88; font-size: 7px; }
.market-logs > header > span { color: #ff6470; font-size: 8px; }
.market-logs > div { overflow-x: auto; }
.market-logs table { width: 100%; min-width: 760px; border-collapse: collapse; table-layout: fixed; }
.market-logs th, .market-logs td { height: 42px; padding: 7px 11px; border-bottom: 1px solid rgba(142, 160, 174, .08); color: #9ca4ad; font-size: 7px; text-align: left; }
.market-logs th { color: #737e87; font-weight: 500; }
.market-logs td:nth-child(2) { color: #dce0e3; }
.market-log-status { padding: 4px 7px; border-radius: 4px; color: #ff6470; background: rgba(255, 38, 53, .1); }
.market-log-status.cancelled { color: #8b949e; background: rgba(255, 255, 255, .035); }
.market-modal-backdrop { position: fixed; z-index: 150; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(0, 2, 4, .84); backdrop-filter: blur(5px); }
.market-create-modal { width: min(620px, 96vw); overflow: hidden; border: 1px solid rgba(255, 38, 53, .45); border-radius: 8px; background: linear-gradient(145deg, #091118, #03080d); box-shadow: 0 25px 80px #000, 0 0 36px rgba(255, 38, 53, .11); }
.market-create-modal > header { min-height: 66px; display: flex; align-items: center; justify-content: space-between; padding: 13px 17px; border-bottom: 1px solid var(--market-line); }
.market-create-modal h2 { font-size: 14px; }
.market-create-modal header p { margin-top: 5px; color: #7c8690; font-size: 8px; }
.market-create-modal header button { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid var(--market-line); border-radius: 5px; color: #a8afb6; background: #050b10; cursor: pointer; }
.market-create-modal header svg { width: 14px; height: 14px; }
.market-create-modal > div { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 17px; }
.market-create-modal label { color: #919aa3; font-size: 8px; }
.market-create-modal label.wide { grid-column: 1 / -1; }
.market-create-modal input, .market-create-modal select, .market-create-modal textarea { width: 100%; margin-top: 6px; padding: 9px 11px; border: 1px solid var(--market-line); border-radius: 5px; outline: 0; color: #e1e4e7; font-size: 9px; background: #03080c; }
.market-create-modal input:focus, .market-create-modal select:focus, .market-create-modal textarea:focus { border-color: rgba(255, 38, 53, .55); }
.market-create-modal textarea { min-height: 74px; resize: vertical; }
.market-create-modal > footer { display: flex; justify-content: flex-end; gap: 9px; padding: 12px 17px; border-top: 1px solid var(--market-line); }
.market-create-modal > footer button { height: 35px; display: flex; align-items: center; gap: 7px; padding: 0 18px; border: 1px solid var(--market-line); border-radius: 5px; color: #aeb5bc; font-size: 8px; background: #050b10; cursor: pointer; }
.market-create-modal > footer button[type="submit"] { color: #fff; border-color: rgba(255, 38, 53, .6); background: linear-gradient(135deg, rgba(255, 38, 53, .65), rgba(112, 7, 15, .72)); }
.market-create-modal > footer svg { width: 13px; height: 13px; }

@media (max-width: 1260px) {
  .market-terminal-head { grid-template-columns: 150px minmax(430px, 1fr) 180px; }
  .market-family-mark { display: none; }
  .market-main-grid { grid-template-columns: 205px minmax(0, 1fr) 235px; }
  .market-products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .market-head-stats > span { padding-inline: 12px; }
}
@media (max-width: 980px) {
  .market-terminal-head { height: auto; grid-template-columns: 150px 1fr; padding-bottom: 10px; }
  .market-head-stats { grid-column: 1 / -1; grid-row: 2; }
  .market-create-button { justify-self: end; }
  .market-main-grid { grid-template-columns: 190px minmax(0, 1fr); }
  .market-right { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .market-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .market-statistics > div { grid-template-columns: repeat(2, 1fr); gap: 14px 0; }
  .market-statistics > div > span:nth-child(2) { border-right: 0; }
}
@media (max-width: 680px) {
  .market-view .content { padding: 10px; }
  .market-terminal-head { grid-template-columns: 1fr auto; }
  .market-brand { width: 150px; }
  .market-create-button { width: 48px; overflow: hidden; color: transparent; gap: 0; }
  .market-create-button svg { color: #fff; }
  .market-head-stats { grid-template-columns: 1fr 1fr; height: auto; }
  .market-head-stats > span { min-height: 57px; border-bottom: 1px solid rgba(142, 160, 174, .1); }
  .market-main-grid { display: block; }
  .market-left { display: block; }
  .market-categories { margin-bottom: 10px; }
  .market-categories > button { display: inline-flex; width: auto; min-width: 46%; margin: 2%; border: 1px solid var(--market-line); border-radius: 4px; }
  .market-categories > button span { flex: 1; }
  .market-premium, .market-price-filter { display: none; }
  .market-catalog-toolbar { grid-template-columns: 1fr auto; }
  .market-catalog-toolbar select { grid-column: 1; }
  .market-filter-trigger { grid-column: 2; grid-row: 2; }
  .market-feature-chips { overflow-x: auto; }
  .market-feature-chips button { flex: 0 0 auto; }
  .market-products { grid-template-columns: 1fr; }
  .market-product-card { height: 265px; }
  .market-statistics > div { grid-template-columns: 1fr; }
  .market-statistics > div > span { min-height: 55px; border-right: 0; border-bottom: 1px solid var(--market-line); }
  .market-right { display: block; margin-top: 10px; }
  .market-right > section { margin-bottom: 10px; }
  .market-create-modal > div { grid-template-columns: 1fr; }
  .market-create-modal label.wide { grid-column: auto; }
}

/* Fujita Funds — business crowdfunding and social support */
.fund-view { background: #010305; }
.fund-view .app { display: block; padding: 0; }
.fund-view .sidebar, .fund-view .topbar, .fund-view .footer { display: none; }
.fund-view .main {
  min-height: 100vh;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 52% 8%, rgba(255, 32, 48, .045), transparent 33%),
    linear-gradient(145deg, #010305, #03070c 48%, #010305);
}
.fund-view .content { padding: 18px; }
.fund-terminal {
  --fund-red: #ff2635;
  --fund-bright: #ff5965;
  --fund-line: rgba(143, 158, 174, .15);
  --fund-panel: rgba(5, 10, 16, .94);
  min-width: 0;
  color: #e7e9ed;
}
.fund-terminal button, .fund-terminal input, .fund-terminal select, .fund-terminal textarea { font-family: inherit; }
.fund-terminal svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fund-terminal-head {
  height: 86px;
  display: grid;
  grid-template-columns: 260px minmax(700px, 1fr) 245px;
  align-items: center;
  gap: 16px;
}
.fund-brand { width: 220px; height: 76px; display: flex; align-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; }
.fund-brand img { width: 205px; height: auto; object-fit: contain; }
.fund-terminal-head > nav {
  height: 62px;
  display: grid;
  grid-template-columns: .75fr .8fr .8fr .75fr 1.55fr .95fr;
  align-items: stretch;
  border: 1px solid var(--fund-line);
  border-radius: 7px;
  background: rgba(4, 8, 13, .9);
  overflow: hidden;
}
.fund-terminal-head > nav button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  color: #b6bdc8;
  font-size: 11px;
  white-space: nowrap;
  background: transparent;
  cursor: pointer;
}
.fund-terminal-head > nav button:hover { color: #fff; background: rgba(255, 38, 53, .05); }
.fund-terminal-head > nav button.active { color: #fff; background: linear-gradient(180deg, rgba(255, 38, 53, .12), rgba(255, 38, 53, .045)); }
.fund-terminal-head > nav button.active::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: var(--fund-red); box-shadow: 0 0 12px var(--fund-red); }
.fund-balance {
  height: 62px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 22px;
  border: 1px solid var(--fund-line);
  border-radius: 7px;
  background: linear-gradient(145deg, rgba(7, 12, 18, .96), rgba(3, 7, 11, .96));
}
.fund-balance small { display: flex; align-items: center; gap: 9px; color: #e4656e; font-size: 10px; }
.fund-balance small svg { width: 16px; height: 16px; }
.fund-balance strong { margin-top: 7px; color: #ff5864; font-size: 20px; font-weight: 500; letter-spacing: .03em; }
.fund-layout {
  display: grid;
  grid-template-columns: 282px minmax(610px, 1fr) 360px;
  align-items: stretch;
  gap: 18px;
  min-height: calc(100vh - 122px);
}
.fund-left, .fund-right, .fund-center { min-width: 0; }
.fund-left { display: grid; grid-template-rows: auto 1fr; gap: 18px; }
.fund-left > section, .fund-left > article, .fund-ranking, .fund-latest, .fund-center {
  border: 1px solid var(--fund-line);
  border-radius: 7px;
  background: linear-gradient(145deg, rgba(6, 11, 17, .96), rgba(3, 7, 12, .98));
}
.fund-left > section { padding: 19px 8px 10px; }
.fund-left h2, .fund-ranking h2, .fund-latest h2 {
  margin: 0;
  color: #ff5662;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
}
.fund-left > section > h2 { padding: 0 12px 15px; }
.fund-left > section > button {
  width: 100%;
  height: 51px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 0 17px;
  border: 0;
  border-left: 2px solid transparent;
  color: #b5bdc9;
  font-size: 12px;
  text-align: left;
  background: transparent;
  cursor: pointer;
}
.fund-left > section > button svg { width: 19px; height: 19px; }
.fund-left > section > button:hover { color: #fff; background: rgba(255, 38, 53, .045); }
.fund-left > section > button.active { color: #fff; border-left-color: var(--fund-red); background: linear-gradient(90deg, rgba(255, 38, 53, .15), rgba(255, 38, 53, .025)); }
.fund-left > article { position: relative; min-height: 380px; padding: 26px 20px; overflow: hidden; }
.fund-left > article::after { content: "藤"; position: absolute; right: -16px; bottom: -54px; color: rgba(255, 38, 53, .025); font-family: serif; font-size: 210px; line-height: 1; }
.fund-left > article h3 { margin: 0 0 24px; color: #ff5662; font-size: 13px; }
.fund-left > article p { position: relative; z-index: 1; margin: 0; color: #a7aeb8; font-size: 12px; line-height: 1.75; }
.fund-left > article img { position: relative; z-index: 1; width: 88px; display: block; margin: 28px auto 8px; filter: saturate(1.05); opacity: .9; }
.fund-left > article em { position: relative; z-index: 1; display: block; color: #7b838e; font-size: 10px; font-style: normal; text-align: center; }
.fund-center { padding: 16px; }
.fund-content-title {
  min-height: 65px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 5px 10px 12px;
}
.fund-content-title h1 { margin: 0; color: #d9dde4; font-size: 21px; line-height: 1.2; font-weight: 500; letter-spacing: .025em; }
.fund-content-title h1 span { width: 17px; height: 17px; display: inline-flex; align-items: center; justify-content: center; margin-left: 8px; border: 1px solid #747e8a; border-radius: 50%; color: #89929d; font-size: 10px; vertical-align: 3px; }
.fund-content-title p { margin: 8px 0 0; color: #9da5b1; font-size: 12px; }
.fund-content-title > div + button, .fund-history > header button {
  min-width: 155px;
  height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(255, 38, 53, .55);
  border-radius: 4px;
  color: #ff8e96;
  font-size: 9px;
  background: rgba(255, 38, 53, .09);
  cursor: pointer;
}
.fund-content-title > div + button svg, .fund-history > header button svg { width: 14px; height: 14px; }
.fund-project-switch { display: flex; gap: 8px; margin: 0 0 10px; overflow-x: auto; }
.fund-project-switch button { min-width: 170px; height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px; border: 1px solid var(--fund-line); border-radius: 4px; color: #969faa; background: #050a10; cursor: pointer; }
.fund-project-switch button.active { color: #fff; border-color: rgba(255, 38, 53, .5); background: rgba(255, 38, 53, .09); }
.fund-project-switch button span { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.fund-project-switch button small { color: var(--fund-bright); }
.fund-project-card {
  min-height: 210px;
  display: grid;
  grid-template-columns: 43% 1fr;
  border: 1px solid var(--fund-line);
  border-radius: 6px;
  background: linear-gradient(145deg, rgba(7, 13, 20, .98), rgba(3, 8, 13, .98));
  overflow: hidden;
}
.fund-project-visual { position: relative; min-height: 210px; overflow: hidden; background: #030609; }
.fund-project-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 50%, rgba(3, 8, 13, .98)), linear-gradient(0deg, rgba(0, 0, 0, .25), transparent 50%); }
.fund-project-visual > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.fund-project-visual > span:not(.fund-social-heart) { position: absolute; z-index: 2; top: 14px; left: 14px; display: flex; align-items: center; gap: 6px; }
.fund-project-visual > span > img { width: 31px; height: 31px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(255, 38, 53, .45)); }
.fund-project-visual > span > b { color: #fff; font-size: 12px; letter-spacing: .1em; }
.fund-social-visual { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; background: radial-gradient(circle, rgba(255, 38, 53, .17), transparent 54%), #030609; }
.fund-social-visual::before { content: ""; position: absolute; width: 230px; height: 230px; border: 1px solid rgba(255, 38, 53, .14); transform: rotate(45deg); }
.fund-social-heart { z-index: 2; width: 76px; height: 76px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 38, 53, .4); border-radius: 50%; color: var(--fund-bright); background: rgba(255, 38, 53, .1); box-shadow: 0 0 35px rgba(255, 38, 53, .14); }
.fund-social-heart svg { width: 38px; height: 38px; }
.fund-social-visual > div { z-index: 2; text-align: center; }
.fund-social-visual > div strong, .fund-social-visual > div small { display: block; }
.fund-social-visual > div strong { color: #fff; font-size: 12px; }
.fund-social-visual > div small { margin-top: 5px; color: #ff7d87; font-size: 9px; }
.fund-project-copy { min-width: 0; padding: 21px 24px; }
.fund-project-copy h2 { margin: 0; color: #f1f2f4; font-size: 19px; font-weight: 600; line-height: 1.25; }
.fund-project-copy > p { min-height: 53px; margin: 13px 0 12px; color: #a8b0bb; font-size: 11px; line-height: 1.5; }
.fund-project-tags { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 15px; color: #9ba3ad; font-size: 10px; }
.fund-project-tags b { margin-left: 8px; padding: 5px 12px; border-radius: 4px; color: #ff929a; font-weight: 500; background: rgba(255, 38, 53, .11); }
.fund-project-tags b.high { color: #ffc04c; background: rgba(255, 166, 0, .12); }
.fund-project-tags b.low { color: #9da5af; background: rgba(143, 158, 174, .1); }
.fund-project-copy dl { display: flex; flex-wrap: wrap; gap: 9px 24px; margin: 0; }
.fund-project-copy dl div { display: flex; gap: 8px; }
.fund-project-copy dt { color: #929aa5; font-size: 10px; }
.fund-project-copy dd { margin: 0; color: #e5e7ea; font-size: 10px; font-weight: 600; }
.fund-project-copy dd small { color: #8e97a2; font-weight: 400; }
.fund-progress-card { margin-top: 12px; padding: 16px 21px 17px; border: 1px solid var(--fund-line); border-radius: 6px; background: radial-gradient(circle at 50% 45%, rgba(255, 38, 53, .07), transparent 32%), rgba(5, 9, 15, .93); }
.fund-progress-summary { display: grid; grid-template-columns: 1fr 150px 1fr; align-items: center; gap: 18px; }
.fund-progress-summary > div:not(.fund-progress-ring) { text-align: center; }
.fund-progress-summary > div > small { color: #ff7d87; font-size: 10px; }
.fund-progress-summary > div > strong { display: block; margin-top: 13px; color: #d8dce2; font-size: 23px; font-weight: 500; }
.fund-progress-summary > div > strong small { display: block; margin-top: 7px; color: #9ca4ae; font-size: 10px; font-weight: 400; }
.fund-progress-ring { width: 140px; height: 140px; position: relative; display: grid; place-items: center; margin: auto; border-radius: 50%; background: conic-gradient(var(--fund-red) var(--fund-progress), rgba(105, 118, 136, .16) 0); box-shadow: 0 0 30px rgba(255, 38, 53, .08); }
.fund-progress-ring::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(143, 158, 174, .08); border-radius: 50%; background: #050910; }
.fund-progress-ring span { z-index: 1; text-align: center; }
.fund-progress-ring b, .fund-progress-ring small { display: block; }
.fund-progress-ring b { color: #eceef1; font-size: 34px; font-weight: 500; }
.fund-progress-ring small { margin-top: 2px; color: #7f8894; font-size: 8px; }
.fund-progress-line { height: 15px; margin-top: 13px; padding: 2px; border-radius: 8px; background: rgba(80, 92, 111, .28); overflow: hidden; }
.fund-progress-line i { height: 100%; display: block; border-radius: 6px; background: linear-gradient(90deg, #8d101c, var(--fund-red)); box-shadow: 0 0 12px rgba(255, 38, 53, .48); }
.fund-progress-scale { display: flex; justify-content: space-between; margin-top: 8px; color: #858e9a; font-size: 9px; }
.fund-metrics { min-height: 100px; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 12px; border: 1px solid var(--fund-line); border-radius: 6px; background: rgba(4, 9, 14, .94); }
.fund-metrics > div { display: flex; align-items: center; justify-content: center; gap: 12px; border-right: 1px solid rgba(143, 158, 174, .1); }
.fund-metrics > div:last-child { border-right: 0; }
.fund-metrics > div > svg { width: 29px; height: 29px; color: #b2bac5; }
.fund-metrics > div.mine > svg, .fund-metrics > div.mine strong { color: #ff5864; }
.fund-metrics span, .fund-metrics small, .fund-metrics strong, .fund-metrics em { display: block; }
.fund-metrics span > small { color: #89929d; font-size: 8px; }
.fund-metrics span > strong { margin-top: 7px; color: #e9ebee; font-size: 18px; font-weight: 500; }
.fund-metrics span > em { margin-top: 3px; color: #8e97a2; font-size: 9px; font-style: normal; }
.fund-contribute-cta { min-height: 83px; display: grid; grid-template-columns: 68px 1fr 190px; align-items: center; gap: 15px; margin-top: 12px; padding: 0 24px; border: 1px solid var(--fund-line); border-radius: 6px; background: linear-gradient(105deg, rgba(255, 38, 53, .08), rgba(5, 9, 15, .96) 35%); overflow: hidden; }
.fund-gift { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid rgba(255, 38, 53, .28); border-radius: 50%; color: var(--fund-bright); background: rgba(255, 38, 53, .08); }
.fund-gift svg { width: 30px; height: 30px; }
.fund-contribute-cta h3 { margin: 0; color: #e5e8ec; font-size: 14px; }
.fund-contribute-cta p { margin: 7px 0 0; color: #939ca7; font-size: 9px; line-height: 1.4; }
.fund-contribute-cta > button { height: 43px; border: 1px solid rgba(255, 38, 53, .55); border-radius: 4px; color: #fff; font-size: 10px; background: linear-gradient(90deg, #70101a, #c31424); box-shadow: 0 0 18px rgba(255, 38, 53, .14); cursor: pointer; }
.fund-contribute-cta > button:hover { background: linear-gradient(90deg, #8d111e, #e11d2d); }
.fund-contribute-cta > button:disabled { opacity: .45; cursor: not-allowed; }
.fund-right { display: grid; grid-template-rows: minmax(330px, .86fr) minmax(390px, 1fr); gap: 18px; }
.fund-ranking, .fund-latest { padding: 22px 16px 16px; }
.fund-ranking h2, .fund-latest h2 { padding: 0 6px 17px; }
.fund-ranking ol, .fund-latest ul { margin: 0; padding: 0; list-style: none; }
.fund-ranking li { height: 50px; display: grid; grid-template-columns: 24px 34px 1fr auto; align-items: center; gap: 8px; padding: 0 9px; border-top: 1px solid rgba(143, 158, 174, .09); }
.fund-ranking li > i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: #b5bdc8; font-size: 10px; font-style: normal; background: rgba(143, 158, 174, .09); }
.fund-investor-mark, .fund-contribution-mark { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid rgba(255, 38, 53, .27); border-radius: 50%; color: #ff6570; background: rgba(255, 38, 53, .07); }
.fund-investor-mark svg, .fund-contribution-mark svg { width: 17px; height: 17px; }
.fund-ranking li > strong { overflow: hidden; color: #c6cbd2; font-size: 11px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.fund-ranking li > b { color: #ff5965; font-size: 11px; font-weight: 500; }
.fund-ranking > button, .fund-latest > button { width: 100%; height: 39px; margin-top: 14px; border: 1px solid rgba(255, 38, 53, .35); border-radius: 4px; color: #ff818a; font-size: 9px; background: rgba(255, 38, 53, .055); cursor: pointer; }
.fund-ranking > button:hover, .fund-latest > button:hover { color: #fff; border-color: var(--fund-red); }
.fund-latest li { min-height: 54px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 0 8px; border-top: 1px solid rgba(143, 158, 174, .09); }
.fund-latest li div strong, .fund-latest li div small { display: block; }
.fund-latest li div strong { color: #bdc4cd; font-size: 10px; font-weight: 500; }
.fund-latest li div small { margin-top: 4px; color: #8e97a1; font-size: 9px; }
.fund-latest li time { color: #a1a9b2; font-size: 8px; }
.fund-no-data { display: flex !important; min-height: 70px !important; align-items: center !important; justify-content: center !important; color: #737d89 !important; font-size: 10px !important; }
.fund-empty { min-height: 670px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--fund-line); border-radius: 6px; background: radial-gradient(circle, rgba(255, 38, 53, .08), transparent 31%), rgba(4, 9, 14, .93); text-align: center; }
.fund-empty > span { width: 78px; height: 78px; display: grid; place-items: center; border: 1px solid rgba(255, 38, 53, .3); border-radius: 50%; color: var(--fund-bright); background: rgba(255, 38, 53, .07); }
.fund-empty > span svg { width: 37px; height: 37px; }
.fund-empty h2 { margin: 23px 0 0; color: #e0e3e7; font-size: 18px; }
.fund-empty p { max-width: 480px; margin: 12px auto 0; color: #9099a4; font-size: 11px; line-height: 1.55; }
.fund-empty button { min-width: 180px; height: 42px; margin-top: 24px; border: 1px solid var(--fund-red); border-radius: 4px; color: #fff; background: rgba(255, 38, 53, .15); cursor: pointer; }
.fund-history { min-height: 735px; }
.fund-history > header { min-height: 62px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 5px 10px 15px; border-bottom: 1px solid rgba(143, 158, 174, .1); }
.fund-history > header h2 { margin: 0; color: #e2e5e9; font-size: 20px; font-weight: 500; }
.fund-history > header p { margin: 8px 0 0; color: #9099a5; font-size: 10px; }
.fund-history-list { display: grid; gap: 10px; padding: 14px 0; }
.fund-history-list article { min-height: 105px; display: grid; grid-template-columns: 46px 1fr 190px 105px; align-items: center; gap: 13px; padding: 14px 16px; border: 1px solid rgba(143, 158, 174, .12); border-radius: 5px; background: rgba(5, 10, 16, .9); }
.fund-history-icon { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255, 38, 53, .25); border-radius: 50%; color: #ff6671; background: rgba(255, 38, 53, .06); }
.fund-history-list article > div small { color: #ff6570; font-size: 8px; }
.fund-history-list article > div h3 { margin: 6px 0 0; color: #e0e3e7; font-size: 13px; }
.fund-history-list article > div p { max-width: 460px; margin: 6px 0 0; overflow: hidden; color: #8f98a3; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.fund-history-progress { display: grid; gap: 6px; }
.fund-history-progress > b { color: #e8eaed; font-size: 13px; font-weight: 500; }
.fund-history-progress > i { height: 6px; border-radius: 4px; background: rgba(90, 104, 123, .24); overflow: hidden; }
.fund-history-progress > i em { height: 100%; display: block; border-radius: inherit; background: var(--fund-red); }
.fund-history-progress > small { color: #828c98; font-size: 7px; }
.fund-status { justify-self: end; padding: 6px 9px; border: 1px solid rgba(255, 38, 53, .28); border-radius: 4px; color: #ff737d; font-size: 8px; font-weight: 500; background: rgba(255, 38, 53, .07); }
.fund-status.completed { color: #78d888; border-color: rgba(58, 190, 83, .25); background: rgba(58, 190, 83, .06); }
.fund-status.paused, .fund-status.archived { color: #a0a8b2; border-color: rgba(143, 158, 174, .2); background: rgba(143, 158, 174, .05); }
.fund-history-empty { min-height: 300px; display: grid; place-items: center; color: #7a8490; font-size: 11px; }
.fund-modal-backdrop { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(0, 2, 4, .8); backdrop-filter: blur(9px); }
.fund-modal { width: min(460px, 94vw); padding: 19px; border: 1px solid rgba(255, 38, 53, .4); border-radius: 7px; background: linear-gradient(145deg, #080e15, #03070b); box-shadow: 0 25px 90px rgba(0, 0, 0, .65), 0 0 30px rgba(255, 38, 53, .08); }
.fund-modal > header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; }
.fund-modal > header h2 { margin: 0; color: #edf0f3; font-size: 17px; }
.fund-modal > header p { margin: 6px 0 0; color: #8e98a4; font-size: 9px; }
.fund-modal > header button { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid var(--fund-line); border-radius: 4px; color: #9aa3ae; background: transparent; cursor: pointer; }
.fund-modal > header button svg { width: 15px; height: 15px; }
.fund-modal > label, .fund-project-form-grid label { display: grid; gap: 7px; color: #a3abb5; font-size: 9px; }
.fund-modal input, .fund-modal select, .fund-modal textarea { width: 100%; border: 1px solid rgba(143, 158, 174, .18); border-radius: 4px; outline: 0; color: #e9ebee; background: #03070c; }
.fund-modal input, .fund-modal select { height: 39px; padding: 0 11px; }
.fund-modal textarea { min-height: 78px; padding: 10px 11px; resize: vertical; }
.fund-modal input:focus, .fund-modal select:focus, .fund-modal textarea:focus { border-color: rgba(255, 38, 53, .6); box-shadow: 0 0 0 2px rgba(255, 38, 53, .06); }
.fund-quick-amounts { display: flex; gap: 7px; margin: 9px 0 15px; }
.fund-quick-amounts button { flex: 1; height: 31px; border: 1px solid rgba(255, 38, 53, .23); border-radius: 4px; color: #ff7b84; font-size: 9px; background: rgba(255, 38, 53, .05); cursor: pointer; }
.fund-modal > footer { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; }
.fund-modal > footer button { min-width: 126px; height: 38px; border: 1px solid var(--fund-line); border-radius: 4px; color: #aeb5be; background: transparent; cursor: pointer; }
.fund-modal > footer button:last-child { color: #fff; border-color: rgba(255, 38, 53, .55); background: linear-gradient(90deg, #78101b, #bd1423); }
.fund-project-modal { width: min(720px, 94vw); }
.fund-project-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fund-project-form-grid .wide { grid-column: 1 / -1; }

@media (max-width: 1280px) {
  .fund-terminal-head { grid-template-columns: 190px minmax(650px, 1fr) 205px; }
  .fund-brand { width: 185px; }
  .fund-brand img { width: 175px; }
  .fund-terminal-head > nav button { gap: 5px; font-size: 9px; }
  .fund-terminal-head > nav button svg { width: 16px; height: 16px; }
  .fund-layout { grid-template-columns: 230px minmax(560px, 1fr) 300px; gap: 12px; }
  .fund-project-copy { padding-inline: 17px; }
  .fund-project-copy h2 { font-size: 16px; }
  .fund-progress-summary { grid-template-columns: 1fr 125px 1fr; }
  .fund-progress-ring { width: 118px; height: 118px; }
  .fund-progress-summary > div > strong { font-size: 19px; }
  .fund-contribute-cta { grid-template-columns: 54px 1fr 155px; padding-inline: 16px; }
}
@media (max-width: 1040px) {
  .fund-terminal-head { height: auto; grid-template-columns: 185px 1fr 205px; }
  .fund-terminal-head > nav { grid-column: 1 / -1; grid-row: 2; height: 52px; }
  .fund-layout { margin-top: 12px; grid-template-columns: 220px minmax(0, 1fr); }
  .fund-right { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
}
@media (max-width: 760px) {
  .fund-view .content { padding: 10px; }
  .fund-terminal-head { grid-template-columns: 1fr 180px; }
  .fund-balance { grid-column: 2; }
  .fund-terminal-head > nav { overflow-x: auto; grid-template-columns: repeat(6, minmax(115px, 1fr)); }
  .fund-layout { grid-template-columns: 1fr; }
  .fund-left { grid-template-rows: auto; }
  .fund-left > article { display: none; }
  .fund-project-card { grid-template-columns: 1fr; }
  .fund-project-visual { min-height: 190px; }
  .fund-progress-summary { grid-template-columns: 1fr; }
  .fund-progress-summary > div:first-child { order: 1; }
  .fund-progress-summary > div:last-child { order: 2; }
  .fund-metrics { grid-template-columns: 1fr 1fr; }
  .fund-metrics > div { min-height: 88px; border-bottom: 1px solid rgba(143, 158, 174, .1); }
  .fund-contribute-cta { grid-template-columns: 50px 1fr; padding-block: 14px; }
  .fund-contribute-cta > button { grid-column: 1 / -1; }
  .fund-right { grid-template-columns: 1fr; }
  .fund-history-list article { grid-template-columns: 42px 1fr; }
  .fund-history-progress, .fund-status { grid-column: 2; justify-self: stretch; }
  .fund-project-form-grid { grid-template-columns: 1fr; }
  .fund-project-form-grid .wide { grid-column: auto; }
}

/* Fujita Quest Terminal */
.quest-view {
  --quest-red: #ff2637;
  --quest-red-soft: rgba(255, 38, 55, .10);
  --quest-red-line: rgba(255, 38, 55, .32);
  --quest-panel: rgba(4, 9, 14, .96);
  --quest-panel-2: rgba(6, 12, 18, .96);
  --quest-line: rgba(137, 153, 169, .15);
  background: #010306;
}
.quest-view .app { display: block; min-height: 100vh; padding: 0; }
.quest-view .sidebar,
.quest-view .topbar,
.quest-view .footer { display: none; }
.quest-view .main { min-height: 100vh; border: 0; border-radius: 0; background: transparent; }
.quest-view .content { padding: 17px; }
.quest-terminal {
  min-width: 0;
  min-height: calc(100vh - 34px);
  color: #cbd0d7;
  background:
    radial-gradient(circle at 49% 40%, rgba(255, 38, 55, .035), transparent 35%),
    linear-gradient(145deg, rgba(2, 6, 10, .78), rgba(1, 4, 7, .96));
}
.quest-terminal button,
.quest-terminal select,
.quest-terminal input,
.quest-terminal textarea { font-family: inherit; }
.quest-terminal-head {
  height: 80px;
  display: grid;
  grid-template-columns: 265px minmax(720px, 1fr) 220px;
  align-items: center;
  gap: 17px;
}
.quest-brand {
  width: 250px;
  height: 72px;
  display: flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.quest-brand img { width: 218px; max-height: 68px; object-fit: contain; object-position: left center; }
.quest-terminal-head > nav {
  height: 61px;
  display: grid;
  grid-template-columns: repeat(7, minmax(92px, 1fr));
  align-items: stretch;
  padding: 0 10px;
  border: 1px solid var(--quest-line);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(7, 12, 19, .93), rgba(3, 7, 11, .95));
}
.quest-terminal-head > nav button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  border: 0;
  color: #aeb5c0;
  font-size: 10px;
  white-space: nowrap;
  background: transparent;
  cursor: pointer;
}
.quest-terminal-head > nav button svg { width: 17px; height: 17px; }
.quest-terminal-head > nav button:hover { color: #f1f2f4; }
.quest-terminal-head > nav button.active { color: #fff; text-shadow: 0 0 12px rgba(255, 38, 55, .45); }
.quest-terminal-head > nav button.active::after {
  content: "";
  position: absolute;
  right: 6px;
  bottom: 0;
  left: 6px;
  height: 2px;
  background: var(--quest-red);
  box-shadow: 0 0 13px var(--quest-red);
}
.quest-terminal-head > nav button.active svg { color: var(--quest-red); filter: drop-shadow(0 0 6px rgba(255, 38, 55, .65)); }
.quest-balance {
  height: 69px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 20px;
  border: 1px solid var(--quest-red-line);
  border-radius: 7px;
  background: linear-gradient(135deg, rgba(255, 38, 55, .055), rgba(4, 8, 13, .98));
}
.quest-balance small { color: #ff6874; font-size: 9px; letter-spacing: .03em; }
.quest-balance strong { margin-top: 6px; color: #f6f7f8; font-size: 18px; font-weight: 500; }
.quest-layout {
  min-width: 0;
  display: grid;
  grid-template-columns: 263px minmax(0, 1fr);
  gap: 18px;
  margin-top: 6px;
}
.quest-left { display: grid; align-content: start; gap: 16px; }
.quest-left > section,
.quest-left > article,
.quest-catalog,
.quest-middle > section,
.quest-bottom > section {
  border: 1px solid var(--quest-line);
  border-radius: 6px;
  background: linear-gradient(145deg, rgba(6, 12, 18, .97), rgba(2, 6, 10, .98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .008);
}
.quest-left > section { padding: 15px 8px 10px; }
.quest-left h2,
.quest-left h3,
.quest-leaders h2,
.quest-bottom h2 { color: #ff6270; font-size: 11px; font-weight: 600; letter-spacing: .025em; }
.quest-left > section h2 { padding: 0 11px 12px; }
.quest-left > section button {
  width: 100%;
  height: 45px;
  display: grid;
  grid-template-columns: 20px 1fr 23px;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #bdc4cd;
  font-size: 10px;
  text-align: left;
  background: transparent;
  cursor: pointer;
}
.quest-left > section button svg { width: 18px; height: 18px; }
.quest-left > section button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quest-left > section button b {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  color: #d0d5db;
  font-size: 9px;
  font-weight: 500;
  background: rgba(120, 135, 151, .11);
}
.quest-left > section button:hover { color: #fff; background: rgba(255, 255, 255, .025); }
.quest-left > section button.active {
  color: #fff;
  border-color: rgba(255, 38, 55, .34);
  background: linear-gradient(90deg, rgba(255, 38, 55, .19), rgba(255, 38, 55, .025));
  box-shadow: inset 2px 0 0 var(--quest-red);
}
.quest-left > section button.active svg { color: #ff5c69; filter: drop-shadow(0 0 6px rgba(255, 38, 55, .35)); }
.quest-left > section button.active b { color: #fff; background: rgba(255, 38, 55, .23); }
.quest-left > article { min-height: 196px; padding: 18px; overflow: hidden; }
.quest-left > article h3 { margin: 0 0 16px; }
.quest-left > article > p { color: #a2aab4; font-size: 9px; line-height: 1.75; }
.quest-left > article > img { width: 62px; height: 62px; display: block; margin: 12px auto 0; object-fit: contain; opacity: .72; filter: saturate(1.3); }
.quest-left > article > em { display: block; margin-top: 3px; color: #ff5f6d; font-size: 9px; font-style: italic; text-align: center; }
.quest-left > article.quest-steps { min-height: 190px; }
.quest-steps p { display: flex; align-items: center; gap: 11px; margin: 0 0 10px; color: #a4acb5; font-size: 8px; }
.quest-steps p i {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 38, 55, .22);
  border-radius: 4px;
  color: #ff7380;
  font-size: 8px;
  font-style: normal;
  background: rgba(255, 38, 55, .06);
}
.quest-main { min-width: 0; display: grid; align-content: start; gap: 13px; }
.quest-catalog { min-width: 0; padding: 15px 16px 12px; }
.quest-catalog > header {
  min-height: 44px;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 206px 200px;
  align-items: start;
  gap: 13px;
}
.quest-catalog > header h1 { margin: 0; color: #ebedf0; font-size: 18px; font-weight: 500; }
.quest-catalog > header p { margin: 3px 0 0; color: #89939e; font-size: 9px; }
.quest-catalog select {
  width: 100%;
  height: 37px;
  padding: 0 12px;
  border: 1px solid var(--quest-line);
  border-radius: 5px;
  outline: 0;
  color: #bcc3cc;
  font-size: 9px;
  background: #03070d;
}
.quest-catalog select:focus { border-color: var(--quest-red-line); }
.quest-cards { min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
.quest-card {
  position: relative;
  height: 287px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 13px 13px;
  overflow: hidden;
  border: 1px solid rgba(133, 149, 166, .16);
  border-radius: 5px;
  background:
    radial-gradient(circle at 50% 25%, rgba(255, 38, 55, .065), transparent 27%),
    linear-gradient(155deg, rgba(7, 14, 21, .98), rgba(3, 7, 11, .98));
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.quest-card:hover { transform: translateY(-2px); border-color: rgba(255, 38, 55, .36); }
.quest-card.selected { border-color: rgba(255, 38, 55, .72); box-shadow: 0 0 22px rgba(255, 38, 55, .08), inset 0 0 28px rgba(255, 38, 55, .025); }
.quest-card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 5px;
  border: 1px solid rgba(58, 145, 221, .36);
  border-radius: 3px;
  color: #53aef7;
  font-size: 7px;
  background: rgba(19, 95, 161, .12);
}
.quest-card-badge.active { color: #ff6572; border-color: rgba(255, 38, 55, .42); background: rgba(255, 38, 55, .11); }
.quest-card-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  margin-top: 5px;
  border: 1px solid rgba(255, 38, 55, .22);
  border-radius: 50%;
  color: #ff5261;
  background: radial-gradient(circle, rgba(255, 38, 55, .15), rgba(255, 38, 55, .015) 69%);
  box-shadow: 0 0 19px rgba(255, 38, 55, .09);
}
.quest-card-icon svg { width: 36px; height: 36px; stroke-width: 1.35; }
.quest-card h3 {
  width: 100%;
  margin: 11px 0 0;
  overflow: hidden;
  color: #edf0f2;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quest-card > p {
  width: 100%;
  height: 34px;
  margin: 7px 0 0;
  overflow: hidden;
  color: #9da6b0;
  font-size: 8px;
  line-height: 1.45;
  text-align: center;
}
.quest-card-reward { width: 100%; margin-top: 9px; padding-top: 7px; border-top: 1px solid rgba(135, 151, 167, .11); }
.quest-card-reward > small { display: block; margin-bottom: 4px; color: #787f89; font-size: 7px; }
.quest-card-reward span { display: flex; align-items: center; gap: 5px; min-height: 16px; color: #cfd3d9; font-size: 8px; }
.quest-card-reward span svg { width: 13px; height: 13px; color: #ff5b68; }
.quest-card-reward span b { font-weight: 500; }
.quest-card-reward span small { margin-left: -2px; color: #929aa4; font-size: 7px; }
.quest-card > button,
.quest-detail > button,
.quest-my-actions button,
.quest-leaders > button,
.quest-bottom td button {
  border: 1px solid rgba(255, 38, 55, .31);
  border-radius: 4px;
  color: #ff9aa2;
  font-size: 8px;
  font-weight: 500;
  background: rgba(255, 38, 55, .075);
  cursor: pointer;
}
.quest-card > button { width: 100%; height: 34px; margin-top: auto; }
.quest-card > button:hover,
.quest-detail > button:hover,
.quest-my-actions button:hover,
.quest-leaders > button:hover,
.quest-bottom td button:hover { color: #fff; border-color: var(--quest-red); background: rgba(255, 38, 55, .17); }
.quest-card button:disabled,
.quest-detail button:disabled,
.quest-my-actions button:disabled { opacity: .45; cursor: default; }
.quest-cards-empty { grid-column: 1 / -1; min-height: 210px; display: grid; place-items: center; color: #77818d; font-size: 10px; }
.quest-middle { min-width: 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 294px; gap: 13px; }
.quest-middle > section { min-width: 0; height: 315px; padding: 14px 16px; overflow: hidden; }
.quest-detail > header { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 11px; }
.quest-detail > header > span,
.quest-my > header > span {
  width: 49px;
  height: 49px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 38, 55, .28);
  border-radius: 50%;
  color: #ff5664;
  background: rgba(255, 38, 55, .07);
}
.quest-detail > header > span svg,
.quest-my > header > span svg { width: 29px; height: 29px; }
.quest-detail header small { color: #ff6572; font-size: 8px; }
.quest-detail header h2 { margin: 3px 0 0; color: #edf0f2; font-size: 14px; }
.quest-detail header p { margin: 1px 0 0; color: #8e98a3; font-size: 8px; }
.quest-detail header > i,
.quest-my header > i {
  align-self: start;
  padding: 4px 6px;
  border: 1px solid var(--quest-red-line);
  border-radius: 3px;
  color: #ff7782;
  font-size: 7px;
  font-style: normal;
  background: rgba(255, 38, 55, .07);
}
.quest-detail h4 { margin: 11px 0 3px; color: #ff5f6d; font-size: 8px; font-weight: 500; }
.quest-detail > p { margin: 0; color: #a3abb5; font-size: 8px; line-height: 1.5; }
.quest-detail > p b { color: #e9ebee; font-weight: 500; }
.quest-detail > p em { color: #ff5e6c; font-style: normal; }
.quest-detail-reward { display: flex; align-items: center; flex-wrap: wrap; gap: 13px; }
.quest-detail-reward span { display: grid; grid-template-columns: 19px auto; grid-template-rows: auto auto; align-items: center; column-gap: 7px; }
.quest-detail-reward span svg { width: 18px; height: 18px; grid-row: 1 / 3; color: #ff5866; }
.quest-detail-reward span b { color: #e5e8eb; font-size: 10px; font-weight: 500; }
.quest-detail-reward span small { color: #8f98a2; font-size: 7px; }
.quest-detail > button { width: 100%; height: 34px; margin-top: 11px; }
.quest-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.quest-empty h2 { color: #d8dde2; font-size: 15px; }
.quest-empty p { margin-top: 8px; }
.quest-my > h2 { margin: 0 0 10px; color: #dfe3e7; font-size: 13px; font-weight: 500; }
.quest-my > header { display: grid; grid-template-columns: 49px 1fr auto; align-items: center; gap: 10px; }
.quest-my header h3 { margin: 0; color: #e9ecef; font-size: 12px; }
.quest-my header p { margin: 4px 0 0; color: #ff6673; font-size: 8px; }
.quest-my-progress { margin: 16px 0 13px; }
.quest-my-progress > span { display: flex; justify-content: space-between; color: #a4acb5; font-size: 8px; }
.quest-my-progress > span b { color: #e3e6e9; font-weight: 500; }
.quest-my-progress > i { height: 7px; display: block; margin-top: 7px; overflow: hidden; border-radius: 4px; background: rgba(121, 136, 151, .13); }
.quest-my-progress > i em { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #6e0711, var(--quest-red)); box-shadow: 0 0 10px rgba(255, 38, 55, .35); }
.quest-my > small { display: block; margin-bottom: 7px; color: #929ba5; font-size: 8px; }
.quest-my-actions { display: grid; gap: 6px; margin-top: 13px; }
.quest-my-actions button { height: 29px; display: flex; align-items: center; justify-content: center; gap: 7px; }
.quest-my-actions button:nth-child(2) { color: #fff; border-color: rgba(255, 38, 55, .62); background: linear-gradient(90deg, #720a14, #c51727); }
.quest-my-actions button:nth-child(3) { color: #939ca6; border-color: var(--quest-line); background: rgba(128, 141, 156, .025); }
.quest-my-actions svg { width: 12px; height: 12px; }
.quest-my-empty { display: flex; flex-direction: column; justify-content: center; }
.quest-my-empty p { color: #8c96a1; font-size: 9px; line-height: 1.6; }
.quest-leaders h2 { margin: 0 0 9px; }
.quest-leaders ul { margin: 0; padding: 0; list-style: none; }
.quest-leaders li { min-height: 54px; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 9px; border-top: 1px solid rgba(134, 150, 166, .11); }
.quest-leaders li > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 38, 55, .27);
  border-radius: 50%;
  color: #ff5c69;
  background: rgba(255, 38, 55, .06);
}
.quest-leaders li > span svg { width: 19px; height: 19px; }
.quest-leaders li div strong,
.quest-leaders li div small { display: block; }
.quest-leaders li div strong { overflow: hidden; color: #d6dbe0; font-size: 9px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.quest-leaders li div small { margin-top: 3px; color: #ff6471; font-size: 8px; }
.quest-leaders li > i { color: #737e8a; font-size: 7px; font-style: normal; }
.quest-leaders li > i::before { content: ""; width: 5px; height: 5px; display: inline-block; margin-right: 4px; border-radius: 50%; background: currentColor; }
.quest-leaders li > i.online { color: #41cb5c; }
.quest-leaders > button { width: 100%; height: 34px; margin-top: 9px; }
.quest-leaders-empty { display: flex !important; justify-content: center; color: #707b87; font-size: 8px; }
.quest-bottom { min-width: 0; display: grid; grid-template-columns: 1.05fr 1fr; gap: 13px; }
.quest-bottom > section { min-width: 0; height: 145px; padding: 12px 14px; overflow: hidden; }
.quest-bottom h2 { margin: 0 0 8px; color: #dfe2e6; }
.quest-bottom > section > div { overflow-x: auto; }
.quest-bottom table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.quest-bottom th { height: 22px; color: #8f98a3; font-size: 7px; font-weight: 400; text-align: left; }
.quest-bottom td { height: 32px; overflow: hidden; border-top: 1px solid rgba(133, 149, 166, .10); color: #b6bdc6; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.quest-bottom td span { padding: 4px 5px; border: 1px solid rgba(255, 156, 40, .28); border-radius: 3px; color: #ffab45; background: rgba(255, 145, 32, .08); }
.quest-bottom td span.done { color: #45d15f; border-color: rgba(55, 197, 81, .27); background: rgba(55, 197, 81, .07); }
.quest-bottom td button { height: 26px; padding: 0 10px; }
.quest-table-empty { height: 62px !important; color: #737d88 !important; text-align: center; }
.quest-modal-backdrop { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(0, 2, 4, .82); backdrop-filter: blur(9px); }
.quest-modal {
  width: min(470px, 94vw);
  padding: 20px;
  border: 1px solid rgba(255, 38, 55, .42);
  border-radius: 7px;
  background: linear-gradient(145deg, #080e15, #02060a);
  box-shadow: 0 28px 100px rgba(0, 0, 0, .7), 0 0 32px rgba(255, 38, 55, .09);
}
.quest-modal > header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 17px; }
.quest-modal > header h2 { color: #f0f2f4; font-size: 16px; }
.quest-modal > header p { margin-top: 5px; color: #8d97a3; font-size: 9px; }
.quest-modal > header button { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid var(--quest-line); border-radius: 4px; color: #9ca5af; background: transparent; cursor: pointer; }
.quest-modal > header button svg { width: 14px; height: 14px; }
.quest-modal label { display: grid; gap: 7px; margin-top: 12px; color: #a5adb7; font-size: 9px; }
.quest-modal input,
.quest-modal select,
.quest-modal textarea { width: 100%; border: 1px solid rgba(137, 153, 169, .2); border-radius: 4px; outline: 0; color: #e8ebee; background: #03070c; }
.quest-modal input,
.quest-modal select { height: 38px; padding: 0 10px; }
.quest-modal input[type="range"] { height: 22px; padding: 0; accent-color: var(--quest-red); }
.quest-modal textarea { min-height: 85px; padding: 10px; resize: vertical; }
.quest-modal input:focus,
.quest-modal select:focus,
.quest-modal textarea:focus { border-color: rgba(255, 38, 55, .6); box-shadow: 0 0 0 2px rgba(255, 38, 55, .06); }
.quest-modal > footer { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; }
.quest-modal > footer button { min-width: 125px; height: 38px; border: 1px solid var(--quest-line); border-radius: 4px; color: #aeb6bf; background: transparent; cursor: pointer; }
.quest-modal > footer button:last-child { color: #fff; border-color: rgba(255, 38, 55, .58); background: linear-gradient(90deg, #750b15, #c91727); }
.quest-create-modal { width: min(720px, 94vw); }
.quest-create-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.quest-create-grid .wide { grid-column: 1 / -1; }

@media (max-width: 1280px) {
  .quest-terminal-head { grid-template-columns: 215px minmax(650px, 1fr) 200px; }
  .quest-brand { width: 205px; }
  .quest-brand img { width: 195px; }
  .quest-terminal-head > nav button { gap: 5px; font-size: 8px; }
  .quest-layout { grid-template-columns: 228px minmax(0, 1fr); gap: 12px; }
  .quest-middle { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr) 245px; }
  .quest-card { padding-inline: 9px; }
  .quest-card h3 { font-size: 9px; }
  .quest-leaders li { grid-template-columns: 34px 1fr; }
  .quest-leaders li > i { display: none; }
}
@media (max-width: 1040px) {
  .quest-terminal-head { height: auto; grid-template-columns: 205px 1fr 200px; }
  .quest-terminal-head > nav { grid-column: 1 / -1; grid-row: 2; height: 52px; }
  .quest-layout { grid-template-columns: 210px minmax(0, 1fr); margin-top: 12px; }
  .quest-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quest-middle { grid-template-columns: 1fr 1fr; }
  .quest-leaders { grid-column: 1 / -1; }
  .quest-leaders ul { display: grid; grid-template-columns: repeat(3, 1fr); }
  .quest-leaders li { padding-inline: 7px; }
}
@media (max-width: 760px) {
  .quest-view .content { padding: 10px; }
  .quest-terminal-head { grid-template-columns: 1fr 185px; }
  .quest-terminal-head > nav { overflow-x: auto; grid-template-columns: repeat(7, minmax(115px, 1fr)); }
  .quest-layout { grid-template-columns: 1fr; }
  .quest-left > article { display: none; }
  .quest-catalog > header { grid-template-columns: 1fr 1fr; }
  .quest-catalog > header > div { grid-column: 1 / -1; }
  .quest-cards { grid-template-columns: 1fr 1fr; }
  .quest-middle,
  .quest-bottom { grid-template-columns: 1fr; }
  .quest-middle > section,
  .quest-bottom > section { height: auto; min-height: 250px; }
  .quest-leaders { grid-column: auto; }
  .quest-leaders ul { grid-template-columns: 1fr; }
  .quest-create-grid { grid-template-columns: 1fr; }
  .quest-create-grid .wide { grid-column: auto; }
}

/* Fujita Black Reestr / complaints */
.complaint-view {
  --quest-red: #ff2637;
  --quest-red-soft: rgba(255, 38, 55, .10);
  --quest-red-line: rgba(255, 38, 55, .32);
  --complaint-panel: rgba(4, 9, 14, .97);
  --complaint-line: rgba(137, 153, 169, .15);
  background: #010306;
}
.complaint-view .app { display: block; min-height: 100vh; padding: 0; }
.complaint-view .sidebar,
.complaint-view .topbar,
.complaint-view .footer { display: none; }
.complaint-view .main { min-height: 100vh; border: 0; border-radius: 0; background: transparent; }
.complaint-view .content { padding: 17px; }
.complaint-terminal {
  min-width: 0;
  min-height: calc(100vh - 34px);
  color: #c8ced6;
  background:
    radial-gradient(circle at 62% 27%, rgba(255, 38, 55, .033), transparent 30%),
    linear-gradient(145deg, rgba(2, 6, 10, .82), rgba(1, 4, 7, .97));
}
.complaint-terminal-head > nav { grid-template-columns: repeat(8, minmax(78px, 1fr)); }
.complaint-terminal-head > nav button { font-size: 8px; }
.complaint-layout {
  min-width: 0;
  display: grid;
  grid-template-columns: 230px minmax(590px, 1fr) 320px;
  gap: 16px;
  margin-top: 6px;
}
.complaint-left { display: grid; align-content: start; gap: 15px; }
.complaint-left > section,
.complaint-left > article,
.complaint-create,
.complaint-list,
.complaint-detail {
  border: 1px solid var(--complaint-line);
  border-radius: 6px;
  background: linear-gradient(145deg, rgba(6, 12, 18, .98), rgba(2, 6, 10, .98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .008);
}
.complaint-left > section { padding: 10px 8px 12px; }
.complaint-left > section > header {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 9px;
}
.complaint-left h2,
.complaint-left h3 { color: #ff6471; font-size: 10px; font-weight: 600; letter-spacing: .025em; }
.complaint-left > section > header h2 { color: #e2e5e9; }
.complaint-left > section > header span { color: #929ba5; }
.complaint-left > section > button {
  width: 100%;
  height: 47px;
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: center;
  gap: 10px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #adb5bf;
  font-size: 9px;
  text-align: left;
  background: transparent;
  cursor: pointer;
}
.complaint-left > section > button svg { width: 19px; height: 19px; }
.complaint-left > section > button.active {
  color: #fff;
  border-color: rgba(255, 38, 55, .37);
  background: linear-gradient(90deg, rgba(255, 38, 55, .20), rgba(255, 38, 55, .025));
  box-shadow: inset 2px 0 0 var(--quest-red);
}
.complaint-left > section > button.active svg { color: #ff6370; }
.complaint-left > article { padding: 17px 15px; }
.complaint-left > article h3 { display: flex; align-items: center; gap: 7px; margin-bottom: 14px; }
.complaint-left > article h3 svg { width: 16px; height: 16px; }
.complaint-left > article > p { color: #9ba4ae; font-size: 8px; line-height: 1.7; }
.complaint-own p {
  height: 31px;
  display: grid;
  grid-template-columns: 8px 1fr 22px;
  align-items: center;
  gap: 9px;
  color: #a5adb7;
  font-size: 8px;
}
.complaint-own p i { width: 7px; height: 7px; border-radius: 50%; background: #ffb322; }
.complaint-own p i.reviewing { background: #3e9dea; }
.complaint-own p i.approved { background: #3cc95a; }
.complaint-own p i.rejected { background: #ff3b4b; }
.complaint-own p i.closed { background: #777f8c; }
.complaint-own p b {
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  color: #d1d6dc;
  font-size: 8px;
  font-weight: 500;
  background: rgba(126, 141, 156, .11);
}
.complaint-rules p { display: flex; align-items: flex-start; gap: 9px; margin: 10px 0 0; }
.complaint-rules p svg { width: 16px; height: 16px; flex: 0 0 16px; color: #ff4352; }
.complaint-main { min-width: 0; display: grid; align-content: start; gap: 13px; }
.complaint-create { height: 231px; padding: 14px 16px; }
.complaint-create > header h1 { color: #ebedf0; font-size: 17px; font-weight: 500; }
.complaint-create form { margin-top: 8px; }
.complaint-create-controls { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(180px, .95fr) 170px; gap: 12px; }
.complaint-create label { display: grid; gap: 5px; color: #a2abb5; font-size: 8px; }
.complaint-create input,
.complaint-create select,
.complaint-create textarea {
  width: 100%;
  border: 1px solid rgba(137, 153, 169, .19);
  border-radius: 4px;
  outline: 0;
  color: #e5e8eb;
  font-size: 9px;
  background: #03070c;
}
.complaint-create input,
.complaint-create select { height: 35px; padding: 0 10px; }
.complaint-create input:focus,
.complaint-create select:focus,
.complaint-create textarea:focus { border-color: rgba(255, 38, 55, .58); box-shadow: 0 0 0 2px rgba(255, 38, 55, .055); }
.complaint-create-controls > button {
  align-self: end;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(255, 38, 55, .58);
  border-radius: 4px;
  color: #fff;
  font-size: 9px;
  background: linear-gradient(90deg, #7d0b16, #ca1727);
  box-shadow: 0 0 18px rgba(255, 38, 55, .09);
  cursor: pointer;
}
.complaint-create-controls > button svg { width: 14px; height: 14px; }
.complaint-description-field { margin-top: 8px; }
.complaint-description-field textarea { height: 66px; padding: 9px 10px; resize: none; }
.complaint-link-field {
  min-width: 0;
  height: 38px;
  display: grid;
  grid-template-columns: minmax(285px, 1fr) minmax(180px, .78fr) 112px;
  align-items: center;
  gap: 10px;
  margin-top: 7px;
  padding: 0 8px;
  border: 1px solid rgba(255, 38, 55, .15);
  border-radius: 4px;
  background: rgba(255, 38, 55, .025);
}
.complaint-link-field > div { min-width: 0; display: flex; align-items: center; gap: 8px; }
.complaint-link-field > div > svg { width: 15px; height: 15px; flex: 0 0 15px; color: #ff5966; }
.complaint-link-field > div span { min-width: 0; }
.complaint-link-field > div strong,
.complaint-link-field > div small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.complaint-link-field > div strong { color: #d8dce1; font-size: 8px; }
.complaint-link-field > div small { margin-top: 1px; color: #ff737e; font-size: 7px; }
.complaint-link-field > input { height: 27px; }
.complaint-link-field > label { display: flex; grid: none; align-items: center; gap: 6px; color: #8e98a3; white-space: nowrap; }
.complaint-link-field > label input { width: 13px; height: 13px; accent-color: var(--quest-red); }
.complaint-list { height: 643px; padding: 0 10px; overflow: hidden; }
.complaint-list > header {
  min-height: 82px;
  display: grid;
  grid-template-columns: minmax(420px, 1fr) 170px 136px;
  align-items: center;
  gap: 10px;
  padding: 10px 2px;
  border-bottom: 1px solid rgba(137, 153, 169, .11);
}
.complaint-list > header h2 { color: #e9ecef; font-size: 16px; font-weight: 500; }
.complaint-list > header nav { display: flex; gap: 7px; margin-top: 8px; }
.complaint-list > header nav button {
  height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(137, 153, 169, .17);
  border-radius: 4px;
  color: #9aa3ad;
  font-size: 7px;
  background: rgba(118, 132, 148, .035);
  cursor: pointer;
}
.complaint-list > header nav button:hover,
.complaint-list > header nav button.active { color: #fff; border-color: rgba(255, 38, 55, .46); background: rgba(255, 38, 55, .11); }
.complaint-list > header > label {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 9px;
  border: 1px solid var(--complaint-line);
  border-radius: 4px;
  background: #03070c;
}
.complaint-list > header > label svg { width: 14px; height: 14px; color: #8d96a1; }
.complaint-list > header > label input { min-width: 0; width: 100%; border: 0; outline: 0; color: #dbe0e5; font-size: 8px; background: transparent; }
.complaint-list > header > select { height: 34px; padding: 0 9px; border: 1px solid var(--complaint-line); border-radius: 4px; outline: 0; color: #aeb6c0; font-size: 8px; background: #03070c; }
.complaint-rows { display: grid; align-content: start; min-height: 475px; }
.complaint-row {
  min-width: 0;
  height: 95px;
  display: grid;
  grid-template-columns: 72px 52px minmax(200px, 1fr) 205px 130px;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border-bottom: 1px solid rgba(137, 153, 169, .10);
  cursor: pointer;
}
.complaint-row:hover { background: rgba(255, 255, 255, .012); }
.complaint-row.selected { border: 1px solid rgba(255, 38, 55, .37); border-radius: 5px; background: linear-gradient(90deg, rgba(255, 38, 55, .04), transparent); box-shadow: inset 2px 0 0 var(--quest-red); }
.complaint-row-date { height: 62px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid rgba(137, 153, 169, .12); }
.complaint-row-date strong { color: #e1e5e9; font-size: 12px; font-weight: 500; }
.complaint-row-date small { max-width: 60px; margin-top: 5px; color: #8d96a1; font-size: 7px; line-height: 1.35; }
.complaint-avatar {
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 38, 55, .42);
  border-radius: 50%;
  color: #ff7a85;
  font-size: 10px;
  font-weight: 600;
  background: radial-gradient(circle, rgba(255, 38, 55, .13), rgba(6, 12, 18, .98) 65%);
}
.complaint-row-copy { min-width: 0; }
.complaint-row-copy p { margin: 0 0 4px; overflow: hidden; color: #8f99a4; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.complaint-row-copy p strong { margin-left: 5px; color: #d8dde2; font-size: 9px; font-weight: 500; }
.complaint-row-copy p b { color: #b6bdc6; font-weight: 400; }
.complaint-row-state { min-width: 0; display: grid; justify-items: start; gap: 8px; }
.complaint-status { display: inline-flex; align-items: center; min-height: 25px; padding: 0 10px; border: 1px solid; border-radius: 4px; font-size: 8px; white-space: nowrap; }
.complaint-status.pending { color: #ffb82d; border-color: rgba(255, 174, 31, .38); background: rgba(255, 174, 31, .08); }
.complaint-status.reviewing { color: #52aef3; border-color: rgba(55, 150, 228, .34); background: rgba(55, 150, 228, .07); }
.complaint-status.approved { color: #52d269; border-color: rgba(57, 197, 82, .34); background: rgba(57, 197, 82, .07); }
.complaint-status.rejected { color: #ff5664; border-color: rgba(255, 38, 55, .38); background: rgba(255, 38, 55, .08); }
.complaint-status.closed { color: #adb5bf; border-color: rgba(137, 153, 169, .22); background: rgba(137, 153, 169, .045); }
.complaint-row-state small { max-width: 190px; overflow: hidden; color: #8e98a3; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.complaint-row > button {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid var(--complaint-line);
  border-radius: 4px;
  color: #b4bbc4;
  font-size: 8px;
  background: rgba(121, 136, 151, .035);
  cursor: pointer;
}
.complaint-row > button:hover { color: #fff; border-color: var(--quest-red-line); }
.complaint-row > button svg { width: 13px; height: 13px; }
.complaint-no-data { min-height: 470px; display: grid; place-items: center; color: #74808c; font-size: 10px; }
.complaint-list > footer { height: 58px; display: flex; align-items: center; justify-content: center; gap: 7px; }
.complaint-list > footer button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--complaint-line);
  border-radius: 4px;
  color: #aeb6bf;
  font-size: 8px;
  background: rgba(119, 134, 150, .035);
  cursor: pointer;
}
.complaint-list > footer button.active { color: #fff; border-color: rgba(255, 38, 55, .58); background: rgba(255, 38, 55, .22); }
.complaint-list > footer button:disabled { opacity: .35; cursor: default; }
.complaint-list > footer button svg { width: 13px; height: 13px; }
.complaint-list > footer span { color: #858e99; font-size: 8px; }
.complaint-detail { height: 887px; overflow: hidden; }
.complaint-detail > header {
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid rgba(137, 153, 169, .11);
}
.complaint-detail > header h2 { color: #e6e9ec; font-size: 14px; font-weight: 500; }
.complaint-detail > header button { width: 26px; height: 26px; display: grid; place-items: center; border: 0; color: #939ca6; background: transparent; cursor: pointer; }
.complaint-detail > header button svg { width: 15px; height: 15px; }
.complaint-detail dl { margin: 0; padding: 13px 16px; border-bottom: 1px solid rgba(137, 153, 169, .11); }
.complaint-detail dl > div { min-height: 36px; display: grid; grid-template-columns: 114px 1fr; align-items: center; gap: 8px; }
.complaint-detail dt { color: #939da7; font-size: 8px; }
.complaint-detail dd { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 7px; overflow: hidden; color: #c1c7cf; font-size: 8px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.complaint-detail dd .complaint-avatar { width: 23px; height: 23px; flex: 0 0 23px; font-size: 6px; }
.complaint-detail dd .complaint-status { min-height: 25px; }
.complaint-description,
.complaint-proof,
.complaint-management,
.complaint-resolution { padding: 16px; border-bottom: 1px solid rgba(137, 153, 169, .11); }
.complaint-description h3,
.complaint-proof h3,
.complaint-management h3,
.complaint-resolution h3 { margin: 0 0 11px; color: #ff6370; font-size: 10px; font-weight: 600; }
.complaint-description p { color: #aab2bc; font-size: 8px; line-height: 1.65; white-space: pre-line; }
.complaint-proof > div { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid rgba(255, 38, 55, .19); border-radius: 5px; background: rgba(255, 38, 55, .035); }
.complaint-proof > div > svg { width: 19px; height: 19px; flex: 0 0 19px; color: #ff5c69; }
.complaint-proof p strong,
.complaint-proof p span { display: block; }
.complaint-proof p strong { color: #dce0e4; font-size: 8px; font-weight: 500; }
.complaint-proof p span { margin-top: 3px; color: #ff707c; font-size: 8px; }
.complaint-proof > a { height: 31px; display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 9px; border: 1px solid rgba(255, 38, 55, .32); border-radius: 4px; color: #ff8c96; font-size: 8px; background: rgba(255, 38, 55, .06); }
.complaint-proof > a svg { width: 12px; height: 12px; }
.complaint-proof > small { display: block; margin-top: 8px; color: #78838f; font-size: 7px; }
.complaint-management > small { display: block; margin: -6px 0 12px; color: #79848f; font-size: 7px; }
.complaint-management > button {
  width: 100%;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  border: 1px solid var(--complaint-line);
  border-radius: 4px;
  color: #b4bbc4;
  font-size: 8px;
  background: rgba(123, 138, 154, .035);
  cursor: pointer;
}
.complaint-management > button svg { width: 15px; height: 15px; }
.complaint-management > button.approve { color: #8fe29e; border-color: rgba(54, 189, 79, .32); background: linear-gradient(90deg, rgba(30, 116, 48, .46), rgba(23, 77, 35, .34)); }
.complaint-management > button.reject { color: #ff9ca4; border-color: rgba(255, 38, 55, .42); background: linear-gradient(90deg, rgba(145, 14, 25, .52), rgba(91, 10, 18, .34)); }
.complaint-management label { display: block; margin-top: 13px; color: #a1aab4; font-size: 8px; }
.complaint-management label span { color: #707b87; }
.complaint-management textarea { width: 100%; height: 60px; margin-top: 6px; padding: 8px; border: 1px solid var(--complaint-line); border-radius: 4px; outline: 0; color: #dce1e5; font-size: 8px; resize: none; background: #03070c; }
.complaint-management textarea:focus { border-color: var(--quest-red-line); }
.complaint-resolution p { color: #b0b8c1; font-size: 8px; line-height: 1.6; }
.complaint-resolution small { display: block; margin-top: 7px; color: #7d8792; font-size: 7px; }
.complaint-detail-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.complaint-detail-empty > span { width: 60px; height: 60px; display: grid; place-items: center; border: 1px solid var(--quest-red-line); border-radius: 50%; color: #ff6471; background: var(--quest-red-soft); }
.complaint-detail-empty > span svg { width: 28px; height: 28px; }
.complaint-detail-empty h2 { margin-top: 16px; color: #dce0e4; font-size: 14px; }
.complaint-detail-empty p { margin-top: 7px; color: #7e8994; font-size: 8px; }

@media (max-width: 1280px) {
  .complaint-layout { grid-template-columns: 205px minmax(540px, 1fr) 280px; gap: 11px; }
  .complaint-terminal-head > nav button { gap: 4px; font-size: 7px; }
  .complaint-create-controls { grid-template-columns: 1fr 1fr 150px; }
  .complaint-link-field { grid-template-columns: minmax(240px, 1fr) minmax(150px, .7fr) 105px; }
  .complaint-list > header { grid-template-columns: minmax(370px, 1fr) 145px 120px; }
  .complaint-list > header nav { gap: 4px; }
  .complaint-list > header nav button { padding-inline: 7px; }
  .complaint-row { grid-template-columns: 66px 47px minmax(160px, 1fr) 165px 105px; gap: 7px; padding-inline: 7px; }
}
@media (max-width: 1060px) {
  .complaint-terminal-head { height: auto; grid-template-columns: 205px 1fr 200px; }
  .complaint-terminal-head > nav { grid-column: 1 / -1; grid-row: 2; height: 52px; }
  .complaint-layout { grid-template-columns: 210px minmax(0, 1fr); margin-top: 12px; }
  .complaint-detail { grid-column: 1 / -1; height: auto; min-height: 420px; }
  .complaint-list > header { grid-template-columns: 1fr 150px; }
  .complaint-list > header > div { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .complaint-view .content { padding: 10px; }
  .complaint-terminal-head { grid-template-columns: 1fr 185px; }
  .complaint-terminal-head > nav { overflow-x: auto; grid-template-columns: repeat(8, minmax(115px, 1fr)); }
  .complaint-layout { grid-template-columns: 1fr; }
  .complaint-left > article { display: none; }
  .complaint-create { height: auto; }
  .complaint-create-controls,
  .complaint-link-field { grid-template-columns: 1fr; }
  .complaint-link-field { height: auto; padding: 9px; }
  .complaint-list { height: auto; }
  .complaint-list > header { grid-template-columns: 1fr; }
  .complaint-list > header nav { overflow-x: auto; }
  .complaint-row { height: auto; min-height: 120px; grid-template-columns: 60px 45px 1fr; padding-block: 10px; }
  .complaint-row-state { grid-column: 2 / 4; }
  .complaint-row > button { grid-column: 2 / 4; }
  .complaint-detail { grid-column: auto; }
}

/* Fujita Black Reestr / warning appeals */
.appeal-view {
  --quest-red: #ff2637;
  --quest-red-soft: rgba(255, 38, 55, .10);
  --quest-red-line: rgba(255, 38, 55, .32);
  --quest-line: rgba(137, 153, 169, .15);
  --appeal-panel: rgba(4, 9, 14, .97);
  --appeal-line: rgba(137, 153, 169, .15);
  background: #010306;
}
.appeal-view .app { display: block; min-height: 100vh; padding: 0; }
.appeal-view .sidebar,
.appeal-view .topbar,
.appeal-view .footer { display: none; }
.appeal-view .main { min-height: 100vh; border: 0; border-radius: 0; background: transparent; }
.appeal-view .content { padding: 17px; }
.appeal-terminal {
  min-width: 0;
  min-height: calc(100vh - 34px);
  color: #c8ced6;
  background:
    radial-gradient(circle at 60% 28%, rgba(255, 38, 55, .035), transparent 31%),
    linear-gradient(145deg, rgba(2, 6, 10, .82), rgba(1, 4, 7, .97));
}
.appeal-terminal button,
.appeal-terminal input,
.appeal-terminal textarea,
.appeal-terminal select { font-family: inherit; }
.appeal-layout {
  min-width: 0;
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 16px;
  margin-top: 6px;
}
.appeal-main { min-width: 0; height: 887px; display: grid; grid-template-rows: 289px 588px; gap: 10px; }
.appeal-top,
.appeal-bottom { min-width: 0; display: grid; gap: 11px; }
.appeal-top { grid-template-columns: minmax(0, 1fr) 300px; }
.appeal-bottom { grid-template-columns: minmax(0, 1fr) 320px; }
.appeal-active,
.appeal-guide,
.appeal-list,
.appeal-form {
  min-width: 0;
  border: 1px solid var(--appeal-line);
  border-radius: 6px;
  background: linear-gradient(145deg, rgba(6, 12, 18, .98), rgba(2, 6, 10, .98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .008);
}
.appeal-active { padding: 16px; }
.appeal-active > header h1 { color: #edf0f2; font-size: 17px; font-weight: 500; letter-spacing: .02em; }
.appeal-active > header p { margin-top: 7px; color: #8c96a1; font-size: 8px; }
.appeal-warn-cards { min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-top: 15px; }
.appeal-warn-card {
  min-width: 0;
  height: 194px;
  padding: 14px 15px;
  border: 1px solid rgba(137, 153, 169, .22);
  border-radius: 5px;
  background: linear-gradient(150deg, rgba(7, 13, 20, .98), rgba(3, 7, 12, .98));
  cursor: pointer;
}
.appeal-warn-card:hover,
.appeal-warn-card.selected { border-color: rgba(255, 38, 55, .45); box-shadow: inset 2px 0 0 #ff2637, 0 0 18px rgba(255, 38, 55, .035); }
.appeal-warn-card h3 { margin: 0 0 14px; color: #ff5361; font-size: 12px; font-weight: 600; }
.appeal-warn-card dl { margin: 0; }
.appeal-warn-card dl > div { min-height: 25px; display: grid; grid-template-columns: 60px 1fr; gap: 7px; align-items: center; }
.appeal-warn-card dt { color: #8f99a4; font-size: 8px; }
.appeal-warn-card dd { margin: 0; overflow: hidden; color: #c6ccd3; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.appeal-warn-card dd i { width: 8px; height: 8px; display: inline-block; margin-right: 7px; border-radius: 50%; background: #ff3344; box-shadow: 0 0 8px rgba(255, 38, 55, .65); }
.appeal-warn-card button {
  width: 100%;
  height: 34px;
  margin-top: 8px;
  border: 1px solid rgba(255, 38, 55, .38);
  border-radius: 4px;
  color: #f2f3f5;
  font-size: 8px;
  background: rgba(255, 38, 55, .08);
  cursor: pointer;
}
.appeal-warn-card.selected button { background: linear-gradient(90deg, rgba(119, 11, 21, .72), rgba(178, 18, 31, .55)); }
.appeal-warn-empty { grid-column: 1 / -1; height: 194px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; color: #77828e; }
.appeal-warn-empty svg { width: 28px; height: 28px; color: #ff5361; }
.appeal-warn-empty strong { color: #c7cdd4; font-size: 11px; font-weight: 500; }
.appeal-warn-empty span { font-size: 8px; }
.appeal-guide { padding: 19px 22px; }
.appeal-guide h2 { margin: 0 0 15px; color: #e1e5e9; font-size: 13px; font-weight: 500; }
.appeal-guide > div { position: relative; min-height: 54px; display: grid; grid-template-columns: 29px 1fr; align-items: start; gap: 13px; }
.appeal-guide > div:not(:last-child)::after { content: "↓"; position: absolute; top: 30px; left: 9px; color: #ff3444; font-size: 11px; }
.appeal-guide b { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid rgba(255, 38, 55, .58); border-radius: 8px; color: #ff7c87; font-size: 11px; font-weight: 500; background: rgba(255, 38, 55, .09); }
.appeal-guide p { padding-top: 1px; color: #a8b0ba; font-size: 8px; line-height: 1.55; }
.appeal-list { height: 588px; padding: 0 10px; overflow: hidden; }
.appeal-list > header {
  min-height: 82px;
  display: grid;
  grid-template-columns: minmax(390px, 1fr) 210px 135px;
  align-items: center;
  gap: 10px;
  padding: 9px 2px;
  border-bottom: 1px solid rgba(137, 153, 169, .11);
}
.appeal-list > header h2 { color: #e9ecef; font-size: 16px; font-weight: 500; }
.appeal-list > header nav { display: flex; gap: 7px; margin-top: 9px; }
.appeal-list > header nav button {
  height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(137, 153, 169, .17);
  border-radius: 4px;
  color: #9aa3ad;
  font-size: 7px;
  background: rgba(118, 132, 148, .035);
  cursor: pointer;
}
.appeal-list > header nav button:hover,
.appeal-list > header nav button.active { color: #fff; border-color: rgba(255, 38, 55, .46); background: rgba(255, 38, 55, .11); }
.appeal-list > header > label { height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 9px; border: 1px solid var(--appeal-line); border-radius: 4px; background: #03070c; }
.appeal-list > header > label svg { width: 14px; height: 14px; color: #8d96a1; }
.appeal-list > header > label input { min-width: 0; width: 100%; border: 0; outline: 0; color: #dbe0e5; font-size: 8px; background: transparent; }
.appeal-list > header > select { height: 34px; padding: 0 9px; border: 1px solid var(--appeal-line); border-radius: 4px; outline: 0; color: #aeb6c0; font-size: 8px; background: #03070c; }
.appeal-rows { min-height: 440px; display: grid; align-content: start; }
.appeal-row {
  min-width: 0;
  height: 86px;
  display: grid;
  grid-template-columns: 72px 52px minmax(200px, 1fr) 220px 126px;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border-bottom: 1px solid rgba(137, 153, 169, .10);
  cursor: pointer;
}
.appeal-row:hover { border-radius: 4px; background: rgba(255, 38, 55, .025); }
.appeal-row-date { height: 59px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid rgba(137, 153, 169, .12); }
.appeal-row-date strong { color: #e1e5e9; font-size: 12px; font-weight: 500; }
.appeal-row-date small { margin-top: 5px; color: #8d96a1; font-size: 7px; line-height: 1.4; }
.appeal-row-copy { min-width: 0; }
.appeal-row-copy p { margin: 0 0 4px; overflow: hidden; color: #8f99a4; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.appeal-row-copy p strong { margin-left: 5px; color: #d8dde2; font-size: 9px; font-weight: 500; }
.appeal-row-copy p b { margin-left: 5px; color: #b6bdc6; font-weight: 400; }
.appeal-row-state { min-width: 0; display: grid; justify-items: start; gap: 8px; }
.appeal-row-state small { max-width: 205px; overflow: hidden; color: #8e98a3; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.appeal-row > button { height: 34px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid var(--appeal-line); border-radius: 4px; color: #b4bbc4; font-size: 8px; background: rgba(121, 136, 151, .035); cursor: pointer; }
.appeal-row > button:hover { color: #fff; border-color: var(--quest-red-line); }
.appeal-row > button svg { width: 13px; height: 13px; }
.appeal-no-data { min-height: 430px; display: grid; place-items: center; color: #74808c; font-size: 10px; }
.appeal-list > footer { height: 56px; display: flex; align-items: center; justify-content: center; gap: 7px; }
.appeal-list > footer button { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--appeal-line); border-radius: 4px; color: #aeb6bf; font-size: 8px; background: rgba(119, 134, 150, .035); cursor: pointer; }
.appeal-list > footer button.active { color: #fff; border-color: rgba(255, 38, 55, .58); background: rgba(255, 38, 55, .22); }
.appeal-list > footer button:disabled { opacity: .35; cursor: default; }
.appeal-list > footer button svg { width: 13px; height: 13px; }
.appeal-list > footer span { color: #858e99; font-size: 8px; }
.appeal-form { height: 588px; padding: 18px 16px; overflow: hidden; }
.appeal-form h2 { margin: 0 0 18px; color: #e6e9ec; font-size: 14px; font-weight: 500; }
.appeal-form form > label { display: block; margin-top: 14px; color: #aab2bc; font-size: 8px; }
.appeal-form form > label:first-child { margin-top: 0; }
.appeal-form label small { color: #737f8b; }
.appeal-form select,
.appeal-form input,
.appeal-form textarea { width: 100%; margin-top: 7px; border: 1px solid rgba(137, 153, 169, .19); border-radius: 4px; outline: 0; color: #dce1e5; font-size: 8px; background: #03070c; }
.appeal-form select,
.appeal-form input { height: 35px; padding: 0 10px; }
.appeal-form textarea { height: 88px; padding: 10px; line-height: 1.55; resize: none; }
.appeal-form label:last-of-type textarea { height: 66px; }
.appeal-form select:focus,
.appeal-form input:focus,
.appeal-form textarea:focus { border-color: rgba(255, 38, 55, .55); box-shadow: 0 0 0 2px rgba(255, 38, 55, .05); }
.appeal-hosts { margin-top: 13px; }
.appeal-hosts > span { color: #a2abb5; font-size: 8px; }
.appeal-hosts > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 8px; }
.appeal-hosts a { height: 31px; display: grid; place-items: center; border: 1px solid rgba(255, 38, 55, .4); border-radius: 4px; color: #ff8290; font-size: 9px; background: rgba(255, 38, 55, .05); }
.appeal-hosts a:hover { color: #fff; background: rgba(255, 38, 55, .12); }
.appeal-form form > button { width: 100%; height: 38px; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 17px; border: 1px solid rgba(255, 38, 55, .6); border-radius: 4px; color: #fff; font-size: 9px; background: linear-gradient(90deg, #750a16, #be1424); box-shadow: 0 0 18px rgba(255, 38, 55, .13); cursor: pointer; }
.appeal-form form > button svg { width: 14px; height: 14px; }
.appeal-form form > button:disabled { opacity: .38; cursor: not-allowed; }
.appeal-form form > p { margin: 10px 0 0; color: #75808c; font-size: 7px; line-height: 1.5; }
.appeal-modal-backdrop { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(0, 2, 4, .78); backdrop-filter: blur(5px); }
.appeal-modal { width: min(620px, 94vw); max-height: 88vh; overflow: auto; border: 1px solid rgba(255, 38, 55, .34); border-radius: 7px; background: linear-gradient(145deg, #071019, #020609); box-shadow: 0 26px 90px rgba(0, 0, 0, .72), 0 0 35px rgba(255, 38, 55, .07); }
.appeal-modal > header { height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid var(--appeal-line); }
.appeal-modal > header small { color: #ff6672; font-size: 8px; }
.appeal-modal > header h2 { margin-top: 5px; color: #eef0f2; font-size: 15px; font-weight: 500; }
.appeal-modal > header button { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid var(--appeal-line); border-radius: 4px; color: #a0a9b3; background: transparent; cursor: pointer; }
.appeal-modal > header button svg { width: 15px; height: 15px; }
.appeal-modal-body { padding: 19px 20px 22px; }
.appeal-modal-body dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 20px; }
.appeal-modal-body dl div { padding: 11px; border: 1px solid var(--appeal-line); border-radius: 4px; background: rgba(255, 255, 255, .012); }
.appeal-modal-body dt { color: #7f8a96; font-size: 7px; }
.appeal-modal-body dd { margin: 6px 0 0; color: #d3d8de; font-size: 9px; }
.appeal-modal-body h3 { margin: 17px 0 7px; color: #ff6b77; font-size: 9px; }
.appeal-modal-body > p { color: #abb3bd; font-size: 9px; line-height: 1.65; white-space: pre-line; }
.appeal-modal-body > a { height: 35px; display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 14px; border: 1px solid var(--quest-red-line); border-radius: 4px; color: #ff8993; font-size: 8px; background: rgba(255, 38, 55, .06); }
.appeal-modal-body > a svg { width: 14px; height: 14px; }
.appeal-modal-resolution { margin-top: 17px; padding: 13px; border: 1px solid rgba(58, 193, 83, .25); border-radius: 4px; background: rgba(58, 193, 83, .035); }
.appeal-modal-resolution strong { color: #76d988; font-size: 9px; }
.appeal-modal-resolution p { margin-top: 7px; color: #b4bcc5; font-size: 8px; }
.appeal-modal-resolution small { color: #74808b; font-size: 7px; }
.appeal-modal-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
.appeal-modal-actions textarea { grid-column: 1 / -1; width: 100%; height: 74px; padding: 10px; border: 1px solid var(--appeal-line); border-radius: 4px; outline: 0; color: #dce1e5; font-size: 8px; resize: none; background: #03070c; }
.appeal-modal-actions button { height: 36px; border: 1px solid var(--appeal-line); border-radius: 4px; color: #b6bdc5; font-size: 8px; background: rgba(126, 141, 156, .04); cursor: pointer; }
.appeal-modal-actions button.approve { color: #86dd96; border-color: rgba(58, 193, 83, .32); background: rgba(58, 193, 83, .06); }
.appeal-modal-actions button.reject { color: #ff7c87; border-color: rgba(255, 38, 55, .4); background: rgba(255, 38, 55, .07); }

@media (max-width: 1280px) {
  .appeal-layout { grid-template-columns: 205px minmax(0, 1fr); gap: 11px; }
  .appeal-top { grid-template-columns: minmax(0, 1fr) 260px; }
  .appeal-bottom { grid-template-columns: minmax(0, 1fr) 285px; }
  .appeal-list > header { grid-template-columns: minmax(350px, 1fr) 170px 120px; }
  .appeal-list > header nav { gap: 4px; }
  .appeal-list > header nav button { padding-inline: 7px; }
  .appeal-row { grid-template-columns: 62px 47px minmax(160px, 1fr) 175px 105px; gap: 7px; padding-inline: 7px; }
}
@media (max-width: 1060px) {
  .appeal-main { height: auto; grid-template-rows: auto auto; }
  .appeal-top { grid-template-columns: 1fr; }
  .appeal-guide { display: none; }
  .appeal-bottom { grid-template-columns: 1fr; }
  .appeal-form { height: auto; }
  .appeal-list > header { grid-template-columns: 1fr 145px; }
  .appeal-list > header > div { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .appeal-view .content { padding: 10px; }
  .appeal-layout { grid-template-columns: 1fr; }
  .appeal-left > article { display: none; }
  .appeal-warn-cards { grid-template-columns: 1fr; }
  .appeal-active { height: auto; }
  .appeal-list { height: auto; }
  .appeal-list > header { grid-template-columns: 1fr; }
  .appeal-list > header nav { overflow-x: auto; }
  .appeal-row { height: auto; min-height: 120px; grid-template-columns: 60px 45px 1fr; padding-block: 10px; }
  .appeal-row-state,
  .appeal-row > button { grid-column: 2 / 4; }
}

/* Fujita Mod · personal security keys */
.security-keys-view {
  --security-red: #d71932;
  --security-red-bright: #f13b50;
  --security-red-deep: #650713;
  --security-line: rgba(166, 128, 135, .20);
  --security-panel: rgba(7, 8, 12, .97);
  background: #020204;
}
.security-keys-view .app { display: block; min-height: 100vh; padding: 0; }
.security-keys-view .sidebar,
.security-keys-view .topbar,
.security-keys-view .footer { display: none; }
.security-keys-view .main { min-height: 100vh; border: 0; border-radius: 0; background: transparent; }
.security-keys-view .content { padding: 14px 16px 10px; }
.security-keys-terminal {
  min-width: 0;
  color: #d7d5d8;
  font-size: 11px;
  background:
    radial-gradient(circle at 69% 28%, rgba(215, 25, 50, .055), transparent 25%),
    radial-gradient(circle at 12% 6%, rgba(215, 25, 50, .035), transparent 22%),
    #020204;
}
.security-keys-terminal svg { stroke-width: 1.55; }
.security-keys-terminal button,
.security-keys-terminal input,
.security-keys-terminal select { font-family: inherit; }
.security-keys-heading {
  height: 72px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.security-keys-brand { min-width: 0; display: flex; align-items: center; gap: 19px; }
.security-keys-brand > img { width: 184px; height: 63px; object-fit: contain; object-position: left center; }
.security-keys-brand h1 { margin-top: 4px; color: #f3f0f1; font-size: 26px; line-height: 1.1; font-weight: 650; letter-spacing: -.025em; }
.security-keys-brand h1 em { color: var(--security-red-bright); font-style: normal; }
.security-keys-brand p { margin-top: 8px; color: #aaa3a7; font-size: 12px; }
.security-keys-heading > aside {
  width: 316px;
  min-height: 70px;
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: start;
  gap: 11px;
  padding: 11px 15px;
  border: 1px solid rgba(215, 25, 50, .32);
  border-radius: 7px;
  background: linear-gradient(135deg, rgba(28, 6, 11, .80), rgba(7, 7, 11, .97));
}
.security-keys-heading > aside > svg { width: 25px; height: 25px; margin-top: 1px; color: var(--security-red-bright); }
.security-keys-heading > aside strong { display: block; color: #f0e8ea; font-size: 11px; }
.security-keys-heading > aside span { display: block; margin-top: 3px; color: #aba1a6; font-size: 9px; line-height: 1.45; }

.security-workflow {
  height: 180px;
  padding: 11px 18px 13px;
  border: 1px solid var(--security-line);
  border-radius: 7px;
  background: linear-gradient(140deg, rgba(12, 9, 13, .98), rgba(5, 6, 9, .98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.01);
}
.security-workflow h2,
.security-panel > h2 { color: #eeeaec; font-size: 12px; line-height: 1; font-weight: 650; letter-spacing: .015em; }
.security-panel > h2 small { color: #a9969c; font-size: 10px; font-weight: 600; }
.security-workflow > div { height: 140px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 15px; margin-top: 11px; }
.security-workflow article { position: relative; min-width: 0; display: grid; grid-template-rows: 37px 45px 1fr; justify-items: center; text-align: center; }
.security-workflow article header { width: 100%; display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 8px; text-align: left; }
.security-workflow article header b { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgba(215,25,50,.64); border-radius: 50%; color: #ff9aaa; font-size: 16px; font-weight: 500; background: rgba(215,25,50,.08); box-shadow: 0 0 14px rgba(215,25,50,.10); }
.security-workflow article header strong { color: #e2dde0; font-size: 9px; line-height: 1.35; font-weight: 600; }
.security-workflow article > i { display: grid; place-items: center; color: #e94b60; font-style: normal; }
.security-workflow article > i svg { width: 31px; height: 31px; }
.security-workflow article > p { max-width: 155px; color: #91898e; font-size: 8.2px; line-height: 1.45; }
.security-step-arrow { position: absolute; top: 66px; right: -15px; color: #7c2634; }
.security-step-arrow svg { width: 26px; height: 15px; }

.security-key-board { display: grid; grid-template-columns: minmax(560px, 46%) minmax(650px, 54%); gap: 9px; margin-top: 10px; }
.security-key-left,
.security-key-right { min-width: 0; display: grid; align-content: start; gap: 9px; }
.security-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--security-line);
  border-radius: 7px;
  background: linear-gradient(145deg, rgba(10, 10, 15, .98), rgba(4, 5, 8, .98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.012);
}
.security-panel > h2 { height: 33px; display: flex; align-items: center; padding: 0 17px; border-bottom: 1px solid rgba(166,128,135,.10); }
.security-key-create { height: 315px; }
.security-create-grid { height: 281px; display: grid; grid-template-columns: minmax(245px, .95fr) minmax(270px, 1.05fr); gap: 13px; padding: 8px 17px 14px; }
.security-create-grid > form,
.security-generated { min-width: 0; padding: 13px 15px; border: 1px solid rgba(166,128,135,.14); border-radius: 6px; background: rgba(255,255,255,.012); }
.security-create-grid h3 { margin-bottom: 12px; color: #d8d1d5; font-size: 10px; font-weight: 600; }
.security-create-grid label { display: block; margin-top: 10px; color: #a89fa4; font-size: 8px; }
.security-create-grid label small { color: #706a6e; }
.security-create-grid input,
.security-create-grid select {
  width: 100%; height: 34px; margin-top: 6px; padding: 0 10px; border: 1px solid rgba(166,128,135,.22); border-radius: 4px; outline: 0; color: #ddd8db; font-size: 9px; background: #07070b;
}
.security-create-grid input:focus,
.security-create-grid select:focus { border-color: rgba(215,25,50,.62); box-shadow: 0 0 0 2px rgba(215,25,50,.07); }
.security-create-grid form > button,
.security-activation-form > button,
.security-activation-result > button,
.security-access-status article > button {
  width: 100%; height: 35px; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 13px; border: 1px solid rgba(232,45,68,.58); border-radius: 4px; color: #fff; font-size: 9px; font-weight: 600; background: linear-gradient(90deg, #650713, #b5142d); box-shadow: 0 0 18px rgba(215,25,50,.12); cursor: pointer;
}
.security-create-grid form > button:hover,
.security-activation-form > button:hover,
.security-activation-result > button:hover { filter: brightness(1.12); }
.security-create-grid form > button:disabled { opacity: .48; cursor: wait; }
.security-create-grid form > button svg { width: 14px; height: 14px; }
.security-generated { background: radial-gradient(circle at 70% 35%, rgba(215,25,50,.055), transparent 48%), rgba(255,255,255,.012); }
.security-generated-key { height: 37px; display: grid; grid-template-columns: 1fr 35px; border: 1px solid rgba(215,25,50,.28); border-radius: 4px; background: rgba(215,25,50,.06); }
.security-generated-key code { min-width: 0; align-self: center; padding-left: 11px; overflow: hidden; color: #ff8d9c; font: 600 12px/1.2 "Consolas", monospace; letter-spacing: .03em; text-overflow: ellipsis; white-space: nowrap; }
.security-generated-key button { display: grid; place-items: center; border: 0; border-left: 1px solid rgba(215,25,50,.20); color: #d96776; background: transparent; cursor: pointer; }
.security-generated-key button svg { width: 14px; height: 14px; }
.security-generated dl { display: grid; gap: 7px; margin-top: 12px; }
.security-generated dl > div { min-width: 0; display: grid; grid-template-columns: 43% 57%; align-items: center; }
.security-generated dt { display: flex; align-items: center; gap: 6px; color: #8f878c; font-size: 8px; }
.security-generated dt svg { width: 11px; height: 11px; color: #b72b3e; }
.security-generated dd { min-width: 0; margin: 0; overflow: hidden; color: #ddd8db; font-size: 8px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.security-generated > p { min-height: 36px; display: flex; align-items: center; gap: 7px; margin-top: 12px; padding: 7px 9px; border: 1px solid rgba(166,128,135,.13); border-radius: 4px; color: #81797e; font-size: 7.5px; line-height: 1.4; }
.security-generated > p svg { width: 13px; height: 13px; flex: 0 0 auto; color: #c1374a; }
.security-generated-empty { height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #665f64; }
.security-generated-empty svg { width: 36px; height: 36px; margin-bottom: 11px; color: #762031; }
.security-generated-empty strong { color: #9c9297; font-size: 10px; }
.security-generated-empty span { margin-top: 5px; font-size: 8px; }

.security-key-management { height: 366px; }
.security-key-management > header { height: 48px; display: grid; grid-template-columns: 97px minmax(350px, 1fr) 135px; align-items: center; gap: 7px; padding: 6px 13px; border-bottom: 1px solid rgba(166,128,135,.10); }
.security-key-management > header button,
.security-key-management > header label { height: 30px; border: 1px solid rgba(166,128,135,.14); border-radius: 4px; color: #9d959a; font-size: 7px; background: rgba(255,255,255,.014); }
.security-key-management > header > button { display: flex; align-items: center; justify-content: center; gap: 5px; color: #ffdce2; border-color: rgba(215,25,50,.38); background: rgba(215,25,50,.10); cursor: pointer; }
.security-key-management > header > button svg { width: 12px; height: 12px; }
.security-key-management nav { min-width: 0; display: flex; gap: 4px; }
.security-key-management nav button { min-width: 0; padding: 0 8px; white-space: nowrap; cursor: pointer; }
.security-key-management nav button b { margin-left: 2px; color: #6f676c; font-weight: 500; }
.security-key-management nav button:hover,
.security-key-management nav button.active { color: #fff; border-color: rgba(215,25,50,.45); background: rgba(215,25,50,.12); }
.security-key-management > header label { display: flex; align-items: center; gap: 6px; padding: 0 8px; background: #06070a; }
.security-key-management > header label svg { width: 12px; height: 12px; flex: 0 0 auto; }
.security-key-management > header label input { min-width: 0; width: 100%; border: 0; outline: 0; color: #d7d2d5; font-size: 7px; background: transparent; }
.security-key-table { height: 227px; overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(215,25,50,.25) transparent; }
.security-key-table table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.security-key-table th { height: 29px; padding: 0 7px; color: #756e73; font-size: 6.5px; font-weight: 500; text-align: left; }
.security-key-table td { height: 28px; padding: 0 7px; overflow: hidden; border-top: 1px solid rgba(166,128,135,.08); color: #aaa3a7; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.security-key-table th:nth-child(1) { width: 18%; }.security-key-table th:nth-child(2) { width: 23%; }.security-key-table th:nth-child(3) { width: 8%; }.security-key-table th:nth-child(4) { width: 14%; }.security-key-table th:nth-child(5) { width: 9%; }.security-key-table th:nth-child(6) { width: 12%; }.security-key-table th:nth-child(7) { width: 16%; }
.security-key-table td:first-child { color: #e0dade; }
.security-key-table td:first-child b { overflow: hidden; font-weight: 500; text-overflow: ellipsis; }
.security-member-dot { width: 17px; height: 17px; display: inline-grid; place-items: center; margin-right: 5px; border: 1px solid rgba(215,25,50,.3); border-radius: 50%; color: #ff7d8e; font-size: 7px; background: rgba(215,25,50,.08); }
.security-key-table code { color: #baafb5; font: 6.7px "Consolas", monospace; }
.security-key-status { display: inline-flex; align-items: center; min-height: 18px; padding: 0 6px; border: 1px solid; border-radius: 3px; font-size: 6.5px; white-space: nowrap; }
.security-key-status.active { color: #65db7a; border-color: rgba(59,193,82,.28); background: rgba(59,193,82,.07); }
.security-key-status.pending { color: #f0b644; border-color: rgba(230,167,42,.28); background: rgba(230,167,42,.07); }
.security-key-status.expired { color: #ff6879; border-color: rgba(255,58,80,.30); background: rgba(255,58,80,.07); }
.security-key-status.revoked { color: #aaa1a6; border-color: rgba(160,150,155,.24); background: rgba(160,150,155,.05); }
.security-key-actions { display: flex; gap: 3px; }
.security-key-actions button { width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid rgba(166,128,135,.15); border-radius: 3px; color: #8f868c; background: rgba(255,255,255,.012); cursor: pointer; }
.security-key-actions button:hover { color: #ff8998; border-color: rgba(215,25,50,.42); }
.security-key-actions button:disabled { opacity: .28; cursor: default; }
.security-key-actions svg { width: 10px; height: 10px; }
.security-table-empty { height: 110px; display: grid; place-items: center; color: #746d71; }
.security-key-management > footer { height: 57px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 13px; border-top: 1px solid rgba(166,128,135,.09); }
.security-key-management > footer > div { display: grid; grid-template-columns: repeat(2, auto); gap: 5px 15px; }
.security-key-management > footer span { color: #736c70; font-size: 6px; }
.security-key-management > footer span b { color: #989095; font-weight: 500; }
.security-key-management > footer span i { width: 6px; height: 6px; display: inline-block; margin-right: 4px; border-radius: 50%; }
.security-key-management > footer i.active { background: #42c85a; }.security-key-management > footer i.pending { background: #e6a72a; }.security-key-management > footer i.expired { background: #fa3850; }.security-key-management > footer i.revoked { background: #777078; }
.security-key-management > footer > p { flex: 0 0 auto; color: #716a6e; font-size: 6.5px; }

.security-player-activation { height: 431px; }
.security-activation-scene { position: relative; height: 397px; overflow: hidden; background: radial-gradient(circle at 70% 30%, rgba(207,24,50,.23), transparent 18%), linear-gradient(102deg, #09070b 0 41%, rgba(6,4,7,.45) 55%, #12040a 100%); }
.security-activation-scene::before { content: ""; position: absolute; inset: 0; opacity: .55; background-image: radial-gradient(circle at 75% 44%, rgba(255,62,80,.16) 0 1px, transparent 1px), radial-gradient(circle at 61% 18%, rgba(255,255,255,.28) 0 1px, transparent 1px); background-size: 34px 29px, 47px 38px; }
.security-red-moon { position: absolute; top: 31px; right: 180px; width: 84px; height: 84px; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #ef7484, #b7122b 52%, #3f0711 100%); box-shadow: 0 0 55px rgba(215,25,50,.36); opacity: .72; }
.security-torii { position: absolute; left: 53%; top: 116px; width: 230px; height: 210px; opacity: .48; filter: drop-shadow(0 0 10px rgba(215,25,50,.45)); }
.security-torii::before,
.security-torii::after { content: ""; position: absolute; top: 50px; width: 23px; height: 160px; background: linear-gradient(90deg,#39040c,#a31329,#320309); }
.security-torii::before { left: 34px; transform: skew(-3deg); }.security-torii::after { right: 34px; transform: skew(3deg); }
.security-torii i,
.security-torii b,
.security-torii span { position: absolute; left: 0; right: 0; display: block; background: linear-gradient(#bd1931,#4b0712); }
.security-torii i { top: 26px; height: 21px; transform: perspective(80px) rotateX(-8deg); }.security-torii b { top: 58px; left: 17px; right: 17px; height: 17px; }.security-torii span { top: 76px; left: 62px; right: 62px; height: 26px; }
.security-activation-form { position: absolute; z-index: 2; inset: 0 auto 0 0; width: 40%; padding: 16px 28px; border-right: 1px solid rgba(166,128,135,.11); background: linear-gradient(90deg, rgba(6,7,10,.98), rgba(6,7,10,.86)); }
.security-activation-form > img { width: 58px; height: 58px; display: block; margin: 0 auto 3px; object-fit: cover; border-radius: 12px; }
.security-activation-form h3 { color: #f1edef; font-size: 17px; line-height: 1.1; text-align: center; }
.security-activation-form > em { display: block; margin-top: 3px; color: #ef4960; font-size: 10px; font-style: normal; text-align: center; }
.security-activation-form h4 { margin-top: 23px; color: #ebe5e8; font-size: 10px; }
.security-activation-form > p { margin-top: 8px; color: #91898e; font-size: 8px; line-height: 1.5; }
.security-activation-form label { display: block; margin-top: 16px; color: #928a8f; font-size: 7px; }
.security-activation-form input { width: 100%; height: 34px; margin-top: 7px; padding: 0 10px; border: 1px solid rgba(166,128,135,.20); border-radius: 4px; color: #e1dade; font: 8px "Consolas", monospace; background: rgba(5,5,8,.82); }
.security-activation-form > small { min-height: 45px; display: flex; align-items: center; gap: 7px; margin-top: 13px; padding: 8px; border: 1px solid rgba(166,128,135,.13); border-radius: 4px; color: #81797e; font-size: 7px; line-height: 1.45; }
.security-activation-form > small svg { width: 13px; height: 13px; flex: 0 0 auto; color: #c03548; }
.security-activation-result { position: absolute; z-index: 3; top: 73px; right: 18px; width: 268px; height: 301px; padding: 18px 18px 15px; border: 1px solid rgba(166,128,135,.22); border-radius: 6px; text-align: center; background: linear-gradient(145deg, rgba(12,10,14,.97), rgba(5,6,9,.98)); box-shadow: 0 18px 55px rgba(0,0,0,.48); }
.security-activation-result > i { width: 42px; height: 42px; display: grid; place-items: center; margin: 0 auto 15px; border: 1px solid rgba(56,201,82,.65); border-radius: 50%; color: #54dd70; font-style: normal; background: rgba(56,201,82,.06); box-shadow: 0 0 18px rgba(56,201,82,.08); }
.security-activation-result > i svg { width: 23px; height: 23px; }
.security-activation-result h3 { color: #62de78; font-size: 9px; }
.security-activation-result > p { margin-top: 15px; color: #8f878c; font-size: 7.5px; }
.security-activation-result > p + p { margin-top: 9px; }
.security-activation-result > p strong { display: block; margin-top: 4px; color: #d8d2d5; font-size: 8px; }
.security-activation-result > button { height: 34px; margin-top: 14px; }
.security-activation-result > button svg { width: 13px; height: 13px; }
.security-activation-result > div { margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(166,128,135,.11); text-align: left; }
.security-activation-result > div b { display: block; color: #c7c0c4; font-size: 7px; }
.security-activation-result > div span { display: block; margin-top: 5px; color: #756e72; font-size: 6.5px; line-height: 1.5; }

.security-status-row { height: 250px; display: grid; grid-template-columns: minmax(420px, 2.15fr) minmax(210px, 1fr); gap: 9px; }
.security-access-status,
.security-key-notifications { height: 250px; }
.security-access-status > div { height: 216px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 11px 15px; }
.security-access-status article { min-width: 0; padding: 11px 14px; border: 1px solid rgba(166,128,135,.14); border-radius: 5px; background: rgba(255,255,255,.012); }
.security-access-status article > h3 { color: #b9afb5; font-size: 8px; font-weight: 500; }
.security-access-status article > header { display: flex; align-items: center; gap: 10px; margin: 11px 0 13px; }
.security-access-status article > header svg { width: 31px; height: 31px; padding: 6px; border: 1px solid currentColor; border-radius: 50%; }
.security-access-status article > header strong { font-size: 11px; }
.security-access-status article.allowed > header { color: #4bd267; }.security-access-status article.blocked > header { color: #ff5268; }
.security-access-status article > p { display: flex; justify-content: space-between; margin-top: 8px; color: #81797e; font-size: 7px; }
.security-access-status article > p b { color: #c7c0c4; font-weight: 500; }
.security-access-status article > ul { margin: 7px 0 0 14px; color: #8c8388; font-size: 6.5px; line-height: 1.55; }
.security-access-status article > button { height: 30px; margin-top: 12px; border-color: rgba(166,128,135,.18); color: #c7c0c4; background: rgba(255,255,255,.025); box-shadow: none; font-size: 7px; }
.security-access-status article.allowed > button { border-color: rgba(215,25,50,.34); color: #ffdce1; background: rgba(215,25,50,.08); }
.security-access-status article > small { display: block; margin-top: 7px; color: #746c71; font-size: 6.5px; text-align: center; }
.security-key-notifications { padding-bottom: 7px; }
.security-notification { min-height: 64px; display: grid; grid-template-columns: 30px 1fr; gap: 8px; align-items: center; margin: 7px 10px 0; padding: 7px 8px; border: 1px solid rgba(166,128,135,.10); border-radius: 4px; background: rgba(255,255,255,.01); }
.security-notification > i { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid; border-radius: 50%; font-style: normal; }
.security-notification > i svg { width: 15px; height: 15px; }
.security-notification.active > i { color: #4dd369; border-color: rgba(77,211,105,.35); }.security-notification.pending > i { color: #e5aa38; border-color: rgba(229,170,56,.35); }.security-notification.revoked > i,.security-notification.expired > i { color: #f64b61; border-color: rgba(246,75,97,.35); }
.security-notification strong { display: block; color: #cfc8cc; font-size: 7.5px; }
.security-notification span { display: block; margin-top: 2px; color: #81797e; font-size: 6.5px; }
.security-notification small { display: block; margin-top: 3px; color: #5f5a5d; font-size: 5.5px; }
.security-terminal-foot { height: 29px; display: flex; align-items: center; justify-content: space-between; padding: 0 7px; color: #6f686c; font-size: 7px; }
.security-terminal-foot > span { display: flex; align-items: center; gap: 6px; }.security-terminal-foot > span svg { width: 11px; height: 11px; color: #9d2638; }
.security-terminal-foot > b { display: flex; align-items: center; gap: 6px; color: #48c660; font-weight: 500; }.security-terminal-foot > b i { width: 7px; height: 7px; border-radius: 50%; background: #36c455; box-shadow: 0 0 8px rgba(54,196,85,.55); }.security-terminal-foot > b.frozen { color: #ff5368; }.security-terminal-foot > b.frozen i { background: #ef334c; box-shadow: 0 0 8px rgba(239,51,76,.55); }
.security-key-denied { min-height: calc(100vh - 30px); display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--security-line); border-radius: 8px; background: #07070b; }
.security-key-denied > svg { width: 52px; height: 52px; color: #d9344a; }.security-key-denied h2 { margin-top: 18px; font-size: 20px; }.security-key-denied p { margin-top: 8px; color: #91898e; }

@media (max-width: 1359px) {
  .security-key-board { grid-template-columns: 1fr; }
  .security-key-left,
  .security-key-right { grid-template-columns: 1fr; }
  .security-key-create,
  .security-key-management,
  .security-player-activation,
  .security-status-row { height: auto; }
  .security-workflow { height: auto; }
  .security-workflow > div { height: auto; grid-template-columns: repeat(3, 1fr); row-gap: 20px; }
  .security-workflow article { min-height: 125px; }
  .security-step-arrow { display: none; }
  .security-key-management { min-height: 366px; }
  .security-status-row { min-height: 250px; }
}
@media (max-width: 899px) {
  .security-keys-heading { height: auto; flex-direction: column; }
  .security-keys-heading > aside { width: 100%; }
  .security-workflow { margin-top: 12px; }
  .security-workflow > div { grid-template-columns: 1fr 1fr; }
  .security-create-grid,
  .security-status-row,
  .security-access-status > div { height: auto; grid-template-columns: 1fr; }
  .security-key-create,
  .security-access-status,
  .security-key-notifications { height: auto; }
  .security-key-management > header { height: auto; grid-template-columns: 1fr; }
  .security-key-management nav { overflow-x: auto; }
  .security-key-table { overflow-x: auto; }
  .security-key-table table { min-width: 760px; }
  .security-activation-form { width: 48%; padding-inline: 18px; }
  .security-activation-result { right: 12px; width: 250px; }
}
@media (max-width: 640px) {
  .security-keys-view .content { padding: 10px; }
  .security-keys-brand { align-items: flex-start; }
  .security-keys-brand > img { width: 110px; height: auto; }
  .security-keys-brand h1 { font-size: 19px; }
  .security-workflow > div { display: block; }
  .security-workflow article { min-height: 95px; grid-template-columns: 42px 1fr; grid-template-rows: auto auto; justify-items: start; text-align: left; }
  .security-workflow article header { grid-column: 1 / -1; }
  .security-workflow article > i { grid-row: 2; }.security-workflow article > p { align-self: center; max-width: none; }
  .security-activation-scene { height: 710px; }
  .security-activation-form { width: 100%; height: 365px; border-right: 0; }
  .security-activation-result { top: 385px; left: 18px; right: 18px; width: auto; }
  .security-red-moon,
  .security-torii { display: none; }
}