/* [project]/src/app/(frontend)/readex_3620fb5c.module.css [app-client] (css) */
@font-face {
  font-family: readex;
  src: url("../media/ReadexPro-s.p.3nn_uso9h1-rs.ttf") format("truetype");
  font-display: swap;
  font-weight: 160 700;
}

@font-face {
  font-family: readex Fallback;
  src: local(Arial);
  ascent-override: 91.51%;
  descent-override: 22.88%;
  line-gap-override: 0.0%;
  size-adjust: 109.28%;
}

.readex_3620fb5c-module__7Rq5hW__className {
  font-family: readex, readex Fallback;
}

.readex_3620fb5c-module__7Rq5hW__variable {
  --font-readex: "readex", "readex Fallback";
}

/* [project]/src/app/(frontend)/app.css [app-client] (css) */
:root {
  --p: #121316;
  --onp: #fff;
  --sc: #ffedc2;
  --onsc: #2a1f00;
  --t: #a87400;
  --lit: #ffc23d;
  --s: #f6f7f8;
  --s0: #fff;
  --s1: #f0f1f3;
  --s2: #eceef0;
  --s3: #e4e6e9;
  --on: #121316;
  --onv: #50555c;
  --ol: #8a9099;
  --olv: #d3d6da;
  --err: #ba1a1a;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  background: var(--s);
  color: var(--on);
  margin: 0;
}

body {
  font-family: var(--font-readex),system-ui,sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
}

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

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

.i {
  fill: currentColor;
  flex: none;
  width: 24px;
  height: 24px;
}

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

.app {
  max-width: 520px;
  min-height: 100dvh;
  padding-top: var(--safe-t);
  background: var(--s);
  flex-direction: column;
  margin: 0 auto;
  display: flex;
  position: relative;
}

.app.dark {
  color: #c9ced4;
  background: #000;
}

.appbar {
  z-index: 5;
  background: var(--s);
  align-items: center;
  gap: 4px;
  min-height: 64px;
  padding: 0 4px 0 16px;
  display: flex;
  position: sticky;
  top: 0;
}

.appbar.back {
  padding-left: 4px;
}

.appbar h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  line-height: 28px;
}

.ib {
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 24px;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  display: grid;
}

.ib .i {
  fill: var(--on);
}

.end {
  margin-left: auto;
}

.main {
  padding: 4px 16px calc(112px + var(--safe-b));
  flex: 1;
}

.main.flat {
  padding-bottom: calc(32px + var(--safe-b));
}

.navbar {
  z-index: 10;
  width: 100%;
  max-width: 520px;
  height: calc(80px + var(--safe-b));
  padding: 12px 0 var(--safe-b);
  background: var(--s2);
  grid-template-columns: repeat(4, 1fr);
  display: grid;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.dest {
  color: var(--onv);
  flex-direction: column;
  align-items: center;
  gap: 4px;
  display: flex;
}

.dest small {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.ind {
  border-radius: 16px;
  place-items: center;
  width: 64px;
  height: 32px;
  display: grid;
}

.dest.on {
  color: var(--on);
}

.dest.on .ind {
  background: var(--sc);
}

.dest.on .i {
  fill: var(--onsc);
}

.fab {
  right: max(16px, 50% - 244px);
  bottom: calc(96px + var(--safe-b));
  z-index: 9;
  background: var(--p);
  color: #fff;
  border-radius: 16px;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 20px 0 16px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  position: fixed;
  box-shadow: 0 4px 8px 3px #00000026, 0 1px 3px #0000004d;
}

.fab .i {
  fill: var(--lit);
}

.lead {
  color: var(--onv);
  margin: 4px 0 16px;
  font-size: 16px;
  line-height: 24px;
}

.fine {
  color: var(--ol);
  font-size: 12px;
}

.center {
  text-align: center;
}

.sub {
  color: var(--onv);
  margin: -4px 0 12px;
  font-size: 13px;
}

.label {
  margin: 20px 0 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.label em {
  color: var(--t);
  margin-left: 6px;
  font-style: normal;
  font-weight: 400;
}

.btn {
  background: var(--p);
  width: 100%;
  height: 48px;
  color: var(--onp);
  letter-spacing: .1px;
  cursor: pointer;
  border: 0;
  border-radius: 24px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 0 24px;
  font-size: 15px;
  font-weight: 500;
  display: flex;
}

.btn .i {
  width: 20px;
  height: 20px;
}

.btn:disabled {
  opacity: .4;
}

.btn.lit {
  background: var(--lit);
  color: #000;
}

.btn.outlined {
  border: 1px solid var(--ol);
  color: var(--on);
  background: none;
}

.btn.text {
  width: auto;
  color: var(--onv);
  background: none;
}

.btn.tonal {
  background: var(--sc);
  color: var(--onsc);
}

.btn.sm {
  white-space: nowrap;
  width: auto;
  height: 32px;
  margin: 0 0 0 auto;
  padding: 0 14px;
  font-size: 13px;
}

.field {
  margin: 18px 0 8px;
  display: block;
  position: relative;
}

.field > span {
  z-index: 1;
  background: var(--s);
  color: var(--onv);
  padding: 0 4px;
  font-size: 12px;
  line-height: 16px;
  position: absolute;
  top: -9px;
  left: 12px;
}

.field input, .field textarea, .field select {
  border: 1px solid var(--ol);
  background: none;
  border-radius: 4px;
  outline: none;
  width: 100%;
  min-height: 56px;
  padding: 15px 16px 13px;
  font-size: 16px;
  line-height: 24px;
  display: block;
}

.field textarea {
  resize: vertical;
  min-height: 104px;
}

.field input:focus, .field textarea:focus, .field select:focus {
  border: 2px solid var(--p);
  padding: 14px 15px 12px;
}

.field small {
  color: var(--onv);
  margin: 4px 16px 0;
  font-size: 12px;
  display: block;
}

.dark .field > span {
  color: #c9ced4;
  background: #000;
}

.dark .field input {
  color: #f6f7f8;
  border-color: #5d6168;
}

.dark .field input:focus {
  border-color: var(--lit);
}

.chip {
  border: 1px solid var(--olv);
  white-space: nowrap;
  height: 32px;
  color: var(--onv);
  border-radius: 8px;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
}

.chip .i {
  width: 18px;
  height: 18px;
}

.chip.ok, .chip.run, .chip.sel {
  background: var(--sc);
  color: var(--onsc);
  border-color: #0000;
}

.chip.ok .i {
  fill: var(--t);
}

.chip.count {
  background: var(--sc);
  color: #6b4a00;
  border: 0;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  font-size: 11px;
}

.chip.count .i {
  width: 14px;
  height: 14px;
}

.chip.count.lock {
  color: #fff;
  background: #121316;
}

.chip.count.lock .i {
  fill: var(--lit);
}

.chip.count.mod, .chip.count.done {
  background: var(--s2);
  color: var(--onv);
}

.chip.sm {
  height: 24px;
  padding: 0 8px;
  font-size: 11px;
}

.list {
  background: var(--s0);
  border-radius: 12px;
  overflow: hidden;
}

.li {
  border-bottom: 1px solid var(--s2);
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding: 8px 16px;
  display: flex;
}

.li:last-child {
  border-bottom: 0;
}

.li b {
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
  display: block;
}

.li small {
  color: var(--onv);
  font-size: 12px;
  line-height: 16px;
  display: block;
}

.li .chip {
  margin-left: auto;
}

.li > div {
  flex: 1;
  min-width: 0;
}

.li .chev {
  margin-left: auto;
}

.card {
  background: var(--s0);
  border-radius: 12px;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  padding: 10px 12px 10px 10px;
  display: flex;
}

.card b {
  margin: 5px 0 1px;
  font-size: 14px;
  font-weight: 500;
  display: block;
}

.card small {
  color: var(--onv);
  margin-bottom: 5px;
  font-size: 12px;
  display: block;
}

.card > div {
  flex: 1;
  min-width: 0;
}

.ci2 {
  background: var(--sc);
  border-radius: 12px;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  display: grid;
}

.ci2 .i {
  fill: var(--onsc);
}

.thumb {
  object-fit: cover;
  background: var(--s2);
  border-radius: 8px;
  flex: none;
  width: 56px;
  height: 70px;
}

.chev {
  width: 24px;
  height: 24px;
  fill: var(--ol);
  flex: none;
}

.note {
  background: var(--s2);
  color: var(--onv);
  border-radius: 12px;
  align-items: flex-start;
  gap: 12px;
  margin: 12px 0;
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.45;
  display: flex;
}

.note .i {
  width: 20px;
  height: 20px;
  fill: var(--t);
}

.note.warn {
  background: var(--sc);
  color: var(--onsc);
}

.hint {
  color: #e9ebee;
  background: #000;
  border-radius: 16px;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.5;
  display: flex;
}

.hint .i {
  width: 20px;
  height: 20px;
  fill: var(--lit);
}

.hint b {
  color: var(--lit);
  font-weight: 500;
}

.nets {
  vertical-align: middle;
  gap: 4px;
  display: inline-flex;
}

.net {
  background: var(--p);
  color: #fff;
  border-radius: 50%;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: 9px;
  font-weight: 600;
  display: grid;
}

.li > .nets .net {
  width: 32px;
  height: 32px;
  font-size: 12px;
}

.check {
  cursor: pointer;
  align-items: flex-start;
  gap: 12px;
  margin: 12px 0;
  font-size: 14px;
  line-height: 20px;
  display: flex;
}

.check input {
  width: 20px;
  height: 20px;
  accent-color: var(--p);
  flex: none;
  margin: 0;
}

.empty {
  background: var(--s0);
  color: var(--onv);
  text-align: center;
  border-radius: 16px;
  padding: 28px 20px;
  font-size: 14px;
  line-height: 1.5;
}

.snack {
  color: #f1f0f4;
  background: #2f3033;
  border-radius: 4px;
  margin: 4px 0 12px;
  padding: 14px 16px;
  font-size: 14px;
}

.err {
  color: var(--err);
  margin: 8px 0;
  font-size: 13px;
}

.login {
  text-align: center;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 34px;
  display: flex;
}

.login .loginLead {
  margin: 4px 0 18px;
  font-size: 15px;
}

.login form {
  width: 100%;
}

.login .field {
  text-align: left;
}

.login svg.word {
  height: 30px;
  display: block;
}

.hello {
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  display: flex;
}

.avatar {
  width: 44px;
  height: 44px;
  color: var(--lit);
  background: #000;
  border-radius: 50%;
  flex: none;
  place-items: center;
  font-weight: 600;
  display: grid;
}

.hello small {
  color: var(--onv);
  font-size: 12px;
  display: block;
}

.hello b {
  font-size: 20px;
  font-weight: 600;
}

.big {
  color: #fff;
  background: #000;
  border-radius: 20px;
  align-items: center;
  gap: 12px;
  height: 72px;
  margin: 16px 0 12px;
  padding: 0 12px 0 20px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
}

.big .i {
  width: 26px;
  height: 26px;
  fill: var(--lit);
}

.big em {
  background: #1c1e22;
  border-radius: 50%;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-left: auto;
  display: grid;
}

.big em .i {
  width: 22px;
  height: 22px;
}

.studio {
  color: #c9ced4;
  background: #000;
  border-radius: 12px;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  padding: 8px 12px;
  font-size: 12px;
  display: flex;
}

.studio b {
  color: var(--lit);
  font-weight: 500;
}

.studio a {
  text-decoration: underline;
}

.studio a:first-of-type {
  margin-left: auto;
}

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

.tile {
  background: var(--s0);
  border-radius: 16px;
  flex-direction: column;
  gap: 12px;
  min-height: 100px;
  padding: 16px;
  display: flex;
}

.tile:last-child {
  flex-direction: row;
  grid-column: span 2;
  align-items: center;
  min-height: 64px;
}

.tile .i {
  width: 28px;
  height: 28px;
  fill: var(--t);
}

.tile b {
  font-size: 14px;
  font-weight: 500;
}

.photos {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.ph {
  object-fit: cover;
  border-radius: 12px;
  width: 76px;
  height: 76px;
}

.addph {
  border: 1.5px dashed var(--ol);
  cursor: pointer;
  border-radius: 12px;
  place-items: center;
  width: 76px;
  height: 76px;
  display: grid;
  position: relative;
}

.addph .i {
  fill: var(--ol);
}

.addph input, .slot input {
  opacity: 0;
  cursor: pointer;
  position: absolute;
  inset: 0;
}

.voice {
  background: var(--s0);
  border-radius: 28px;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  padding: 8px 8px 8px 16px;
  display: flex;
}

.voice .i {
  fill: var(--t);
}

.voice small {
  color: var(--onv);
  font-size: 12px;
}

.voice .grow {
  color: var(--onv);
  flex: 1;
  font-size: 13px;
}

.rec {
  cursor: pointer;
  background: #000;
  border: 0;
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  display: grid;
}

.rec .i {
  fill: var(--lit);
}

.rec.on {
  background: var(--err);
}

.rec.on .i {
  fill: #fff;
}

.voice audio {
  flex: 1;
  min-width: 0;
  height: 32px;
}

.file {
  border: 1px dashed var(--ol);
  color: var(--onv);
  border-radius: 12px;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
  padding: 12px 16px;
  font-size: 13px;
  display: flex;
  position: relative;
}

.file .i {
  fill: var(--t);
}

.done {
  text-align: center;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 24px;
  display: flex;
}

.done > .i {
  width: 72px;
  height: 72px;
  fill: var(--t);
}

.done h2 {
  margin: 0;
  font-size: 28px;
}

.done p {
  color: var(--onv);
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

.seg {
  border: 1px solid var(--ol);
  border-radius: 20px;
  grid-template-columns: 1fr 1fr;
  height: 40px;
  margin: 4px 0 16px;
  display: grid;
  overflow: hidden;
}

.seg a {
  justify-content: center;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
}

.seg a + a {
  border-left: 1px solid var(--ol);
}

.seg .on {
  background: var(--sc);
  color: var(--onsc);
}

.seg .i {
  width: 18px;
  height: 18px;
}

.pubTop {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 64px;
  margin-left: -12px;
  display: flex;
}

.hero {
  background: var(--s2);
  border-radius: 16px;
  width: 100%;
  display: block;
}

.mid {
  border-radius: 12px;
  width: 58%;
  margin: 4px auto 8px;
  display: block;
}

.caption {
  color: var(--onv);
  white-space: pre-line;
  margin: 12px 0 6px;
  font-size: 14px;
  line-height: 1.5;
}

.charter {
  color: var(--t);
  align-items: center;
  gap: 6px;
  margin: 4px 0;
  font-size: 13px;
  display: flex;
}

.charter .i {
  width: 18px;
  height: 18px;
}

.when {
  color: var(--onv);
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  font-size: 13px;
  display: flex;
}

.days {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.wkh {
  letter-spacing: .04em;
  color: var(--onv);
  margin: 10px 0 2px;
  font-size: 12px;
  font-weight: 600;
}

.day {
  background: var(--s0);
  border-radius: 12px;
  align-items: stretch;
  gap: 12px;
  min-height: 52px;
  padding: 6px 10px 6px 6px;
  display: flex;
}

.dn {
  border-radius: 10px;
  flex-direction: column;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 44px;
  display: flex;
}

.dn small {
  color: var(--onv);
  font-size: 11px;
}

.dn b {
  font-size: 17px;
  font-weight: 600;
}

.day.today .dn {
  color: #fff;
  background: #000;
}

.day.today .dn small {
  color: #c9ced4;
}

.dl {
  flex-direction: column;
  flex: 1;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  display: flex;
}

.it {
  align-items: center;
  gap: 10px;
  display: flex;
}

.it .thumb {
  border-radius: 6px;
  width: 34px;
  height: 42px;
}

.it b {
  font-size: 13px;
  font-weight: 500;
  display: block;
}

.it b em {
  color: var(--onv);
  font-style: normal;
  font-weight: 400;
}

.it .chip {
  margin-top: 3px;
}

.none {
  color: var(--olv);
  font-size: 13px;
  font-style: normal;
}

.spaces {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
  display: grid;
}

.space {
  background: var(--s0);
  border-radius: 16px;
  align-items: center;
  gap: 10px;
  padding: 12px;
  display: flex;
}

.space .i {
  width: 28px;
  height: 28px;
  fill: var(--t);
}

.space b {
  font-size: 15px;
  font-weight: 500;
  display: block;
}

.space small {
  color: var(--onv);
  font-size: 12px;
  display: block;
}

.qi {
  background: var(--s2);
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  display: grid;
}

.qi .i {
  width: 18px;
  height: 18px;
}

.qi.run {
  background: var(--sc);
}

.qi.ok {
  background: #000;
}

.qi.ok .i {
  fill: var(--lit);
}

.pair {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  display: grid;
}

.slot {
  aspect-ratio: 1;
  border: 1.5px dashed var(--ol);
  background: var(--s0);
  color: var(--onv);
  border-radius: 16px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.slot img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.slot .i {
  width: 28px;
  height: 28px;
  fill: var(--onv);
}

.weekbar {
  background: var(--s2);
  text-align: center;
  border-radius: 28px;
  justify-content: center;
  align-items: center;
  margin: 0 0 12px;
  padding: 8px;
  display: flex;
}

.weekbar b {
  letter-spacing: .02em;
  font-size: 16px;
  font-weight: 600;
  display: block;
}

.weekbar small {
  color: var(--onv);
  font-size: 12px;
}

.install {
  color: #e9ebee;
  background: #000;
  border-radius: 16px;
  align-items: center;
  gap: 12px;
  margin: 16px 0 0;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.45;
  display: flex;
}

.install .i {
  fill: var(--lit);
}

.install b {
  color: #fff;
  font-weight: 500;
  display: block;
}

.install button {
  background: var(--lit);
  color: #000;
  cursor: pointer;
  border: 0;
  border-radius: 18px;
  margin-left: auto;
  padding: 8px 14px;
  font-weight: 500;
}

.install .x {
  background: none;
  padding: 4px;
}

.install .x .i {
  fill: #8a9099;
  width: 18px;
  height: 18px;
}

.steps {
  counter-reset: s;
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps li {
  counter-increment: s;
  margin: 0 0 14px;
  padding-left: 40px;
  font-size: 15px;
  line-height: 1.5;
  position: relative;
}

.steps li:before {
  content: counter(s);
  width: 28px;
  height: 28px;
  color: var(--lit);
  background: #000;
  border-radius: 50%;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
  display: grid;
  position: absolute;
  top: 0;
  left: 0;
}

.steps .i {
  vertical-align: -4px;
  width: 20px;
  height: 20px;
}

.desk {
  background: var(--s);
  grid-template-columns: 248px 1fr;
  min-height: 100dvh;
  display: grid;
}

.drawer {
  color: #c9ced4;
  background: #000;
  flex-direction: column;
  gap: 2px;
  height: 100dvh;
  padding: 24px 12px;
  display: flex;
  position: sticky;
  top: 0;
}

.sideWord {
  padding: 0 16px 20px;
  display: block;
}

.sideWord svg {
  height: 22px;
  display: block;
}

.sideWord small {
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #8a9099;
  margin-top: 6px;
  font-size: 10px;
  display: block;
}

.drawer nav {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.di {
  border-radius: 28px;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
}

.di em {
  margin-left: auto;
  font-size: 12px;
  font-style: normal;
}

.di.on {
  color: #fff;
  background: #ffc23d29;
}

.di.on .i {
  fill: var(--lit);
}

.dmain {
  min-width: 0;
  padding: 24px 28px 48px;
}

.dhead {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  display: flex;
}

.dhead h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
}

.pHead {
  align-items: center;
  gap: 14px;
  display: flex;
}

.pHead small {
  color: var(--onv);
  font-size: 13px;
}

.ptabs {
  border-bottom: 1px solid var(--olv);
  gap: 4px;
  margin: -2px 0 18px;
  display: flex;
  overflow-x: auto;
}

.ptabs a {
  color: var(--onv);
  white-space: nowrap;
  border-bottom: 3px solid #0000;
  margin-bottom: -1px;
  padding: 12px 20px 11px;
  font-size: 14px;
  font-weight: 500;
}

.ptabs .on {
  border-color: var(--p);
  color: var(--on);
}

.kanban {
  grid-template-columns: repeat(6, minmax(150px, 1fr));
  gap: 12px;
  padding-bottom: 8px;
  display: grid;
  overflow-x: auto;
}

.col {
  background: var(--s2);
  border-radius: 16px;
  min-height: 420px;
  padding: 12px;
}

.colH {
  letter-spacing: .3px;
  color: var(--onv);
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 500;
}

.colH em {
  color: var(--t);
  font-style: normal;
}

.kc {
  background: var(--s0);
  border-radius: 12px;
  gap: 8px;
  margin-bottom: 8px;
  padding: 8px;
  display: flex;
}

.kc .thumb {
  width: 36px;
  height: 45px;
}

.kc b {
  font-size: 12px;
  font-weight: 600;
  display: block;
}

.kc small {
  color: var(--onv);
  font-size: 11px;
  display: block;
}

.kc .flag {
  color: var(--t);
  margin-top: 4px;
  font-size: 10px;
  display: inline-block;
}

.review {
  grid-template-columns: minmax(0, 360px) 1fr;
  align-items: start;
  gap: 28px;
  display: grid;
}

.review .hero {
  max-width: 360px;
}

.table {
  background: var(--s0);
  border-radius: 12px;
  overflow: hidden;
}

.tr {
  border-bottom: 1px solid var(--s2);
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 16px;
  font-size: 13px;
  display: grid;
}

.tr.th {
  background: var(--s2);
  min-height: 44px;
  color: var(--onv);
  letter-spacing: .3px;
  font-size: 12px;
  font-weight: 500;
}

.tr b {
  font-weight: 600;
}

.tr:last-child {
  border-bottom: 0;
}

.tr.wkrow {
  background: var(--s1);
  min-height: 36px;
  font-size: 12px;
}

a.tr:hover {
  background: var(--s1);
}

.alert {
  color: var(--t);
}

.dots {
  letter-spacing: 3px;
}

.kpis {
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  display: grid;
}

.kpis div {
  background: var(--s0);
  border-radius: 12px;
  padding: 14px;
}

.kpis b {
  font-size: 26px;
  font-weight: 500;
  display: block;
}

.kpis small {
  color: var(--onv);
  font-size: 12px;
}

.acols {
  grid-template-columns: 1fr 1fr .8fr;
  gap: 14px;
  margin-top: 14px;
  display: grid;
}

.acard {
  background: var(--s0);
  border-radius: 16px;
  padding: 16px 18px;
}

.acard .label {
  margin-top: 0;
}

.ap {
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 13.5px;
  line-height: 1.45;
  display: flex;
}

.ap .i {
  width: 18px;
  height: 18px;
  fill: var(--t);
  margin-top: 1px;
}

.ap.no .i {
  fill: var(--err);
}

.sw {
  color: var(--onv);
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  font-size: 12px;
  display: flex;
}

.sw i {
  border-radius: 10px;
  flex: none;
  width: 36px;
  height: 36px;
  box-shadow: inset 0 0 0 1px #0000001a;
}

.sw b {
  color: var(--on);
  font-size: 13px;
  font-weight: 500;
  display: block;
}

.dsId {
  background: var(--s0);
  border-radius: 16px;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  display: flex;
}

.dsId img {
  object-fit: cover;
  border-radius: 50%;
  width: 56px;
  height: 56px;
}

.dsId b {
  font-size: 22px;
  font-weight: 600;
}

.dsId small {
  color: var(--onv);
  margin-left: 10px;
  font-size: 12px;
}

.dsId p {
  color: var(--onv);
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.45;
}

.pieces {
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
  display: grid;
}

.pieces img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 8px;
  width: 100%;
}

.form2 {
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
  display: grid;
}

.form2 .wide {
  grid-column: span 2;
}

.netsel {
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
  display: flex;
}

.netsel label {
  border: 1px solid var(--olv);
  border-radius: 8px;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
  display: flex;
}

.audio {
  width: 100%;
  margin: 6px 0;
}

@media (max-width: 900px) {
  .desk {
    grid-template-columns: 1fr;
  }

  .drawer {
    z-index: 5;
    flex-direction: column;
    height: auto;
    padding: 10px 8px 6px;
    position: sticky;
  }

  .sideWord {
    padding: 2px 10px 8px;
  }

  .sideWord small {
    display: none;
  }

  .drawer nav {
    flex-direction: row;
    overflow-x: auto;
  }

  .di {
    white-space: nowrap;
    height: 40px;
    padding: 0 14px;
    font-size: 13px;
  }

  .di .i {
    width: 20px;
    height: 20px;
  }

  .dmain {
    padding: 16px;
  }

  .review, .acols, .form2 {
    grid-template-columns: 1fr;
  }

  .form2 .wide {
    grid-column: auto;
  }

  .kpis {
    grid-template-columns: 1fr 1fr;
  }

  .tr {
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row;
  }

  .tr.th {
    display: none;
  }
}

/*# sourceMappingURL=src_app_%28frontend%29_11xp_wd._.css.map*/