/* [next]/internal/font/google/inter_173403c7.module.css [app-client] (css) */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/2c55a0e60120577a-s.0bjc5tiuqdqro.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/9c72aa0f40e4eef8-s.0m6w47a4e5dy9.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/ad66f9afd8947f86-s.11u06r12fd6v_.woff2") format("woff2");
  unicode-range: U+1F??;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/5476f68d60460930-s.0wxq9webf.ew4.woff2") format("woff2");
  unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/2bbe8d2671613f1f-s.067x_6k0k23tk.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/1bffadaabf893a1e-s.16ipb6fqu393i.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/83afe278b6a6bb3c-s.p.0q-301v4kxxnr.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/2c55a0e60120577a-s.0bjc5tiuqdqro.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/9c72aa0f40e4eef8-s.0m6w47a4e5dy9.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/ad66f9afd8947f86-s.11u06r12fd6v_.woff2") format("woff2");
  unicode-range: U+1F??;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/5476f68d60460930-s.0wxq9webf.ew4.woff2") format("woff2");
  unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/2bbe8d2671613f1f-s.067x_6k0k23tk.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/1bffadaabf893a1e-s.16ipb6fqu393i.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/83afe278b6a6bb3c-s.p.0q-301v4kxxnr.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../media/2c55a0e60120577a-s.0bjc5tiuqdqro.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../media/9c72aa0f40e4eef8-s.0m6w47a4e5dy9.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../media/ad66f9afd8947f86-s.11u06r12fd6v_.woff2") format("woff2");
  unicode-range: U+1F??;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../media/5476f68d60460930-s.0wxq9webf.ew4.woff2") format("woff2");
  unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../media/2bbe8d2671613f1f-s.067x_6k0k23tk.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../media/1bffadaabf893a1e-s.16ipb6fqu393i.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../media/83afe278b6a6bb3c-s.p.0q-301v4kxxnr.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../media/2c55a0e60120577a-s.0bjc5tiuqdqro.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../media/9c72aa0f40e4eef8-s.0m6w47a4e5dy9.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../media/ad66f9afd8947f86-s.11u06r12fd6v_.woff2") format("woff2");
  unicode-range: U+1F??;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../media/5476f68d60460930-s.0wxq9webf.ew4.woff2") format("woff2");
  unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../media/2bbe8d2671613f1f-s.067x_6k0k23tk.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../media/1bffadaabf893a1e-s.16ipb6fqu393i.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../media/83afe278b6a6bb3c-s.p.0q-301v4kxxnr.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Inter Fallback;
  src: local(Arial);
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0.0%;
  size-adjust: 107.12%;
}

.inter_173403c7-module__czr2iW__className {
  font-family: Inter, Inter Fallback;
  font-style: normal;
}

.inter_173403c7-module__czr2iW__variable {
  --font-inter: "Inter", "Inter Fallback";
}

/* [next]/internal/font/google/jetbrains_mono_af4518a3.module.css [app-client] (css) */
@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/04c5164763c40239-s.0h-nw9_c8d~-_.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/26f284dcc38c84c0-s.10hk62x1-0d9n.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/7e7f32a39836f228-s.0bmyfaahigzds.woff2") format("woff2");
  unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}

@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/fa39153a3fc630ba-s.0-0ft90hthv3~.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/6a5386fd6038edbe-s.16fk0g~ypa53a.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/051742360c26797e-s.p.0f97p8c3305p~.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/04c5164763c40239-s.0h-nw9_c8d~-_.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/26f284dcc38c84c0-s.10hk62x1-0d9n.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/7e7f32a39836f228-s.0bmyfaahigzds.woff2") format("woff2");
  unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}

@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/fa39153a3fc630ba-s.0-0ft90hthv3~.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/6a5386fd6038edbe-s.16fk0g~ypa53a.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/051742360c26797e-s.p.0f97p8c3305p~.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: JetBrains Mono Fallback;
  src: local(Arial);
  ascent-override: 75.79%;
  descent-override: 22.29%;
  line-gap-override: 0.0%;
  size-adjust: 134.59%;
}

.jetbrains_mono_af4518a3-module__r1sKWW__className {
  font-family: JetBrains Mono, JetBrains Mono Fallback;
  font-style: normal;
}

.jetbrains_mono_af4518a3-module__r1sKWW__variable {
  --font-jbmono: "JetBrains Mono", "JetBrains Mono Fallback";
}

/* [project]/venddor-studio/dev/venddor-studio/packages/ui/tokens.css [app-client] (css) */
:root {
  --tx: #1e1e1e;
  --tx2: #757575;
  --tx3: #b3b3b3;
  --line: #e6e6e6;
  --hov: #f5f5f5;
  --bg2: #f5f5f5;
  --field: #f5f5f5;
  --panel: #fff;
  --canvas: #f5f5f5;
  --sel: #0d99ff;
  --selbg: #e5f4ff;
  --comp: #9747ff;
  --comptx: #8638e5;
  --compbg: #f1e8ff;
  --dev: #14ae5c;
  --vd: #003aff;
  --vdbg: #eef2ff;
  --warn: #b45309;
  --red: #f24822;
  --ok: #0a7a3e;
  --okbg: #e8f7ee;
  --warnbg: #fff4e5;
  --shadow: 0 2px 6px #00000014, 0 0 0 1px #0000000d;
  --rail: 62px;
  --lp: 240px;
  --rp: 240px;
  --top: 48px;
  --font: var(--font-inter, "Inter"), system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: var(--font-jbmono, "JetBrains Mono"), ui-monospace, monospace;
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --tx: #ececec;
  --tx2: #a3a3a3;
  --tx3: #666;
  --line: #333;
  --hov: #2c2c2c;
  --bg2: #262626;
  --field: #2b2b2b;
  --panel: #1f1f1f;
  --canvas: #161616;
  --selbg: #123049;
  --compbg: #33264a;
  --vd: #5b7cff;
  --vdbg: #1a2250;
  --ok: #5bd08a;
  --okbg: #14301f;
  --warn: #f5b454;
  --warnbg: #3a2a12;
  --shadow: 0 2px 10px #00000080, 0 0 0 1px #ffffff0f;
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
}

/* [project]/venddor-studio/dev/venddor-studio/apps/web/app/globals.css [app-client] (css) */
* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--panel);
  color: var(--tx);
  font: 13px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--sel);
}

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

:focus-visible {
  outline: 2px solid var(--sel);
  outline-offset: 2px;
}

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

.ic {
  flex-shrink: 0;
}

.btn {
  background: var(--field);
  cursor: pointer;
  height: 32px;
  color: var(--tx);
  white-space: nowrap;
  border: 0;
  border-radius: 7px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  text-decoration: none;
  display: inline-flex;
}

.btn.pri {
  background: var(--sel);
  color: #fff;
}

.btn.line {
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
}

.btn.big {
  height: 40px;
  font-size: 14px;
}

.btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.ibtn {
  width: 30px;
  height: 30px;
  color: var(--tx2);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 7px;
  place-items: center;
  display: grid;
}

.ibtn:hover {
  background: var(--hov);
  color: var(--tx);
}

.alert {
  background: var(--warnbg);
  color: var(--warn);
  border-radius: 8px;
  margin: 0 0 16px;
  padding: 10px 12px;
}

.note {
  background: var(--okbg);
  color: var(--ok);
  border-radius: 8px;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 10px 12px;
  display: flex;
}

.sr-only {
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

.sr-only:focus-visible + label {
  outline: 2px solid var(--sel);
  outline-offset: 2px;
}

.sp {
  flex: 1;
}

.f {
  background: var(--field);
  border: 1px solid #0000;
  border-radius: 7px;
  outline: none;
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
}

.f:focus {
  border-color: var(--sel);
  background: var(--panel);
}

.btn.danger {
  color: var(--red);
}

.btn.danger-fill {
  background: var(--red);
  color: #fff;
}

.chip {
  background: var(--hov);
  height: 18px;
  color: var(--tx2);
  white-space: nowrap;
  text-overflow: ellipsis;
  border-radius: 4px;
  align-items: center;
  gap: 3px;
  max-width: 170px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 500;
  display: inline-flex;
  overflow: hidden;
}

.chip.vd {
  background: var(--vdbg);
  color: var(--vd);
}

.chip.fav {
  background: var(--warnbg);
  color: var(--warn);
}

.chip.purge {
  background: var(--warnbg);
  color: var(--warn);
  flex-shrink: 0;
  max-width: none;
  overflow: visible;
}

.fl-tx {
  flex-direction: column;
  flex: 1;
  gap: 2px;
  min-width: 0;
  padding: 2px 0;
  display: flex;
}

.fl-tx .fname {
  max-width: 100%;
}

.fl-tx .fmeta {
  white-space: normal;
  text-overflow: clip;
  overflow-wrap: anywhere;
  flex: none;
  line-height: 1.35;
  overflow: visible;
}

.perm {
  color: var(--tx2);
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0 4px;
  font-size: 12px;
  line-height: 1.35;
  display: flex;
}

.perm .ic {
  flex: none;
  margin-top: 1px;
}

.perm span {
  overflow-wrap: anywhere;
  min-width: 0;
}

.note.info {
  background: var(--hov);
  color: var(--tx2);
}

.chip.warn {
  background: var(--warnbg);
  color: var(--warn);
}

.chip.ok {
  background: var(--okbg);
  color: var(--ok);
}

.home {
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: 100vh;
  display: grid;
}

.side {
  border-right: 1px solid var(--line);
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  height: 100vh;
  padding: 8px;
  display: flex;
  position: sticky;
  top: 0;
  overflow: hidden;
}

.side > * {
  flex-shrink: 0;
}

.side nav {
  overscroll-behavior: contain;
  scrollbar-width: thin;
  flex-direction: column;
  flex: auto;
  gap: 1px;
  min-height: 0;
  display: flex;
  overflow-y: auto;
}

.side nav > * {
  flex-shrink: 0;
}

.side nav :focus-visible {
  outline-offset: -2px;
}

.side nav > .nav-projs {
  overscroll-behavior: contain;
  scrollbar-width: thin;
  flex-direction: column;
  flex: 0 auto;
  gap: 1px;
  min-height: 35px;
  display: flex;
  overflow-y: auto;
}

.nav-projs > * {
  flex-shrink: 0;
}

.nav-grp form {
  margin: 0;
}

.nav-grp-h {
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
}

.nav-chev {
  color: var(--tx2);
  place-items: center;
  transition: transform .12s;
  display: grid;
}

.nav-grp.open .nav-chev {
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .nav-chev {
    transition: none;
  }
}

.nav-grp-b {
  flex-direction: column;
  gap: 1px;
  margin-top: 1px;
  display: flex;
}

.nav-grp-b[hidden] {
  display: none;
}

.nav-grp-b .nav-it {
  padding-left: 22px;
}

.org-switch {
  gap: 6px;
  padding: 0 0 4px;
  display: flex;
}

.org-switch .sel {
  flex: 1;
}

.hsearch {
  background: var(--field);
  height: 32px;
  color: var(--tx2);
  border-radius: 7px;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  padding: 0 9px;
  display: flex;
}

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

.hsearch:focus-within {
  box-shadow: inset 0 0 0 1px var(--sel);
}

.nav-tx {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.nav-it .r {
  color: var(--tx2);
  font-size: 11px;
}

.nav-sep {
  background: var(--line);
  height: 1px;
  margin: 4px 0;
}

.nav-h {
  color: var(--tx2);
  padding: 2px 10px 4px;
  font-size: 11px;
}

.team-h {
  height: 32px;
  color: var(--tx);
  border-radius: 7px;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  font-weight: 600;
  text-decoration: none;
  display: flex;
}

.team-h:hover {
  background: var(--hov);
}

.team-h.on {
  background: var(--vdbg);
  color: var(--vd);
}

.team-mark {
  color: #fff;
  border-radius: 6px;
  flex-shrink: 0;
  place-items: center;
  width: 20px;
  height: 20px;
  font-size: 10px;
  font-weight: 600;
  display: grid;
}

.team-mark.big {
  border-radius: 12px;
  width: 48px;
  height: 48px;
  font-size: 18px;
}

.team-mark.vd {
  box-shadow: inset 0 0 0 1px var(--line);
  background: #fff;
}

.team-mark.vd img {
  width: 72%;
  height: auto;
  display: block;
}

:root[data-theme="dark"] .team-mark.vd {
  box-shadow: none;
  background: #fff;
}

.brand {
  border-radius: 8px;
  align-items: center;
  gap: 8px;
  margin: -2px -2px 0;
  padding: 8px 8px 14px;
  text-decoration: none;
  display: flex;
}

.brand:hover {
  background: var(--hov);
}

.brand img {
  width: auto;
  height: 26px;
}

.brand span {
  color: var(--tx2);
  border-left: 1px solid var(--line);
  padding-left: 8px;
  font-size: 13px;
  font-weight: 600;
}

.lg-dark {
  display: none;
}

:root[data-theme="dark"] .lg-dark {
  display: block;
}

:root[data-theme="dark"] .lg-light {
  display: none;
}

.nav-it {
  height: 32px;
  color: var(--tx);
  border-radius: 7px;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  text-decoration: none;
  display: flex;
}

.nav-it:hover {
  background: var(--hov);
}

.nav-it.on {
  background: var(--vdbg);
  color: var(--vd);
  font-weight: 500;
}

.side-foot {
  flex-direction: column;
  flex: none;
  gap: 8px;
  margin-top: auto;
  padding: 8px 4px;
  display: flex;
}

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

.who .av {
  background: var(--sel);
  color: #fff;
  border-radius: 50%;
  flex-shrink: 0;
  place-items: center;
  width: 26px;
  height: 26px;
  font-size: 11px;
  font-weight: 600;
  display: grid;
}

.who .av.dev {
  background: var(--field);
  color: var(--tx2);
  box-shadow: inset 0 0 0 1px var(--line);
}

.who .who-tx b {
  font-size: 12.5px;
}

.who .who-tx .muted {
  font-size: 11.5px;
}

.who-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.prefs {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.seg {
  background: var(--field);
  border-radius: 7px;
  padding: 2px;
  display: flex;
}

.seg button {
  cursor: pointer;
  min-width: 38px;
  height: 26px;
  color: var(--tx2);
  background: none;
  border: 0;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
}

.seg button.on {
  background: var(--panel);
  color: var(--tx);
  box-shadow: 0 1px 2px #0000001a;
}

.main {
  background: var(--panel);
  min-width: 0;
  padding: 24px 32px 48px;
}

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

.page-h h1 {
  margin: 0;
  font-size: 20px;
}

.page-h p {
  max-width: 70ch;
  margin: 4px 0 0;
}

.status {
  color: var(--tx2);
  white-space: nowrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  display: inline-flex;
}

.status i {
  background: var(--dev);
  border-radius: 50%;
  width: 8px;
  height: 8px;
}

.status.down i {
  background: var(--red);
}

.card {
  box-shadow: inset 0 0 0 1px var(--line);
  background: var(--panel);
  border-radius: 12px;
  padding: 16px;
}

.card h2 {
  margin: 0 0 8px;
  font-size: 14px;
}

.card p {
  max-width: 72ch;
  margin: 0 0 12px;
}

.r0 {
  background: var(--vdbg);
  box-shadow: none;
  margin-bottom: 16px;
}

.empty {
  text-align: center;
  color: var(--tx2);
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 48px 16px;
  display: flex;
}

.empty b {
  color: var(--tx);
}

.form-row {
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 16px;
  display: flex;
}

.form-row h2 {
  flex-basis: 100%;
  margin: 0;
}

.form-row label {
  flex-direction: column;
  flex: 200px;
  gap: 5px;
  min-width: 0;
  font-weight: 500;
  display: flex;
}

.form-row label.narrow {
  flex: 0 120px;
}

.form-row input {
  background: var(--field);
  border: 1px solid #0000;
  border-radius: 7px;
  outline: none;
  width: 100%;
  height: 32px;
  padding: 0 10px;
}

.form-row input:focus {
  border-color: var(--sel);
  background: var(--panel);
}

.brand-list {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

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

.brand-it > div {
  flex-direction: column;
  flex: 1;
  min-width: 0;
  display: flex;
}

.brand-it b {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.brand-it .sw {
  border-radius: 9px;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  box-shadow: inset 0 0 0 1px #0000001a;
}

.new-pills {
  flex-wrap: wrap;
  flex: 1;
  gap: 6px;
  min-width: 0;
  display: flex;
}

.new-pill {
  background: var(--field);
  height: 32px;
  color: var(--tx);
  border-radius: 999px;
  align-items: center;
  gap: 7px;
  padding: 0 13px 0 7px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
}

.new-pill:hover {
  background: var(--hov);
  box-shadow: inset 0 0 0 1px var(--line);
}

.kind-opt i {
  color: #fff;
  border-radius: 5px;
  flex-shrink: 0;
  place-items: center;
  width: 20px;
  height: 20px;
  display: grid;
}

.toolbar {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  display: flex;
}

.filters {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.toolbar .seg button {
  place-items: center;
  min-width: 32px;
  display: grid;
}

.results {
  margin: -6px 0 12px;
}

.cards {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.fcard {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 10px;
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.fcard:hover {
  box-shadow: 0 2px 8px #0000000f;
}

.fcard .thumb {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb,var(--kc) 8%,var(--panel));
  height: 140px;
  color: var(--kc);
  border-radius: 10px 10px 0 0;
  place-items: center;
  display: grid;
}

.fcard .info {
  align-items: flex-start;
  gap: 10px;
  padding: 12px 10px 12px 14px;
  display: flex;
}

.ftype {
  color: #fff;
  border-radius: 5px;
  flex-shrink: 0;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  display: grid;
}

.fcard .meta {
  flex-direction: column;
  flex: 1;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.fcard .meta b {
  overflow-wrap: anywhere;
  font-weight: 500;
  line-height: 1.35;
}

.fcard .meta > span.muted {
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.4;
}

.chips {
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
  display: flex;
}

.plink {
  color: inherit;
  text-decoration: none;
}

.plink:hover {
  color: var(--sel);
  text-decoration: underline;
}

.frows, .flist {
  border-top: 1px solid var(--line);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fmarks {
  flex-direction: column;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  display: flex;
}

.fmarks .ftype {
  margin-top: 1px;
}

.frow-tx {
  flex-direction: column;
  flex: 1;
  gap: 1px;
  min-width: 0;
  display: flex;
}

.frow {
  align-items: flex-start;
  padding-top: 9px;
  padding-bottom: 9px;
}

.frow > .menu-wrap {
  margin-top: -4px;
}

.fcard.is-new, .frow.is-new {
  box-shadow: 0 0 0 2px var(--sel),0 4px 14px color-mix(in srgb,var(--sel) 25%,transparent);
  animation: 1.6s ease-out flash-new;
}

@keyframes flash-new {
  0% {
    background: var(--selbg);
  }

  100% {
    background: var(--panel);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fcard.is-new, .frow.is-new {
    animation: none;
  }
}

.frow, .fl-row {
  border-bottom: 1px solid var(--line);
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 6px 8px;
  display: flex;
}

.frow:hover, .fl-row:hover {
  background: var(--hov);
}

.fname {
  overflow-wrap: anywhere;
  font-weight: 500;
  line-height: 1.35;
}

.fmeta {
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.4;
}

.fkind {
  white-space: nowrap;
  font-size: 12px;
}

.frow .chips {
  justify-content: flex-end;
  max-width: 40%;
  margin: 0;
}

.fl-row .btn {
  height: 30px;
}

.fl-row form {
  display: contents;
}

.menu-wrap {
  flex-shrink: 0;
  position: relative;
}

.menu {
  z-index: 40;
  background: var(--panel);
  min-width: 220px;
  color: var(--tx);
  box-shadow: 0 4px 18px #00000024,0 0 0 1px var(--line);
  border-radius: 10px;
  padding: 6px;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
}

.menu form {
  margin: 0;
}

.mi {
  width: 100%;
  height: 32px;
  color: inherit;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  font: inherit;
  background: none;
  border: 0;
  border-radius: 6px;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  text-decoration: none;
  display: flex;
}

.mi:hover, .mi:focus-visible {
  background: var(--selbg);
  outline: none;
}

.mi .ic {
  color: var(--tx2);
}

.mi.danger, .mi.danger .ic {
  color: var(--red);
}

.ms {
  background: var(--line);
  height: 1px;
  margin: 5px 2px;
}

.overlay {
  z-index: 80;
  background: #00000059;
  place-items: center;
  padding: 16px;
  display: grid;
  position: fixed;
  inset: 0;
}

.modal {
  background: var(--panel);
  border-radius: 13px;
  width: 440px;
  max-width: 100%;
  max-height: calc(100vh - 32px);
  overflow: auto;
  box-shadow: 0 10px 40px #00000040;
}

.modal-h {
  align-items: center;
  gap: 8px;
  padding: 14px 12px 8px 20px;
  display: flex;
}

.modal-h h2 {
  flex: 1;
  margin: 0;
  font-size: 14px;
}

.modal-b {
  flex-direction: column;
  gap: 12px;
  padding: 4px 20px 18px;
  display: flex;
}

.modal-b .alert, .modal-b .note, .modal-b p {
  margin: 0;
}

.mform {
  flex-direction: column;
  gap: 12px;
  display: flex;
}

.mform label {
  flex-direction: column;
  gap: 5px;
  font-weight: 500;
  display: flex;
}

.mfield {
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  font-weight: 500;
  display: flex;
}

.mfield .sel {
  font-weight: 400;
}

.row-end {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  display: flex;
}

.narrow-form {
  max-width: 560px;
}

.hint {
  font-size: 12px;
  font-weight: 400;
}

.kinds {
  border: 0;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  display: flex;
}

.kinds legend {
  margin-bottom: 6px;
  padding: 0;
  font-weight: 500;
}

.mform .kind-opt {
  height: 36px;
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
  border-radius: 8px;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 0 12px 0 8px;
  font-weight: 500;
}

.kind-opt:has(input:checked) {
  box-shadow: inset 0 0 0 2px var(--sel);
  background: var(--selbg);
}

.kind-opt input {
  margin: 0;
}

.pcards {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  display: grid;
}

.pcard {
  border: 1px solid var(--line);
  color: var(--tx);
  border-radius: 10px;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  display: flex;
  overflow: hidden;
}

.pcard:hover {
  box-shadow: 0 2px 8px #0000000f;
}

.pthumb {
  place-items: center;
  height: 96px;
  display: grid;
}

.pthumb.small {
  border-radius: 10px;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
}

.pinfo {
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 10px 14px;
  display: flex;
}

.pinfo b {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  overflow: hidden;
}

.pinfo .muted {
  font-size: 12px;
}

.proj-head {
  align-items: center;
  gap: 14px;
  min-width: 0;
  display: flex;
}

.proj-head > div {
  min-width: 0;
}

.proj-head h1 {
  text-overflow: ellipsis;
  overflow: hidden;
}

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

.avs {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.av {
  color: #fff;
  border-radius: 50%;
  flex-shrink: 0;
  place-items: center;
  width: 28px;
  height: 28px;
  font-size: 11px;
  font-weight: 600;
  display: grid;
}

.avs .av {
  box-shadow: 0 0 0 2px var(--panel);
  margin-left: -6px;
}

.avs .av:first-child {
  margin-left: 0;
}

.sec-title {
  margin: 24px 0 10px;
  font-size: 14px;
}

.pad {
  padding: 8px 0;
}

.scope {
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 8px;
}

.scope-h {
  border-bottom: 1px solid var(--line);
  background: var(--bg2);
  border-radius: 10px 10px 0 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  display: flex;
}

.scope-h h2 {
  margin: 0;
  font-size: 13px;
}

.scope-h .chip {
  max-width: none;
}

.scope-h .btn {
  height: 30px;
}

.inline {
  display: contents;
}

.scope-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.scope-it {
  box-shadow: inset -1px -1px 0 var(--line);
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  min-height: 60px;
  padding: 10px 8px 10px 14px;
  display: flex;
}

.scope-it .sic {
  border-radius: 6px;
  flex-shrink: 0;
  place-items: center;
  width: 28px;
  height: 28px;
  display: grid;
}

.scope-it .tx {
  flex-direction: column;
  flex: 1;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.scope-it b {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  overflow: hidden;
}

.scope-it b > a, .scope-it b > span {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}

.scope-it b a {
  color: var(--tx);
  text-decoration: none;
}

.scope-it b a:hover {
  color: var(--sel);
  text-decoration: underline;
}

.scope-it .tx > span {
  color: var(--tx2);
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.35;
}

.scope .empty {
  padding: 28px 16px;
}

.drop {
  border: 1.5px dashed var(--line);
  text-align: center;
  color: var(--tx2);
  cursor: pointer;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 12px 14px;
  padding: 14px;
  display: flex;
}

.drop > span {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.drop:hover, .drop.over {
  border-color: var(--sel);
  background: var(--selbg);
  color: var(--tx);
}

.task-search {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.task-search .f {
  flex: 180px;
  width: auto;
}

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

.task-list {
  border: 0;
  flex-direction: column;
  gap: 4px;
  max-height: 300px;
  margin: 0;
  padding: 0;
  display: flex;
  overflow: auto;
}

.mform .task-opt {
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
  border-radius: 8px;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-weight: 400;
}

.task-opt:has(input:checked) {
  box-shadow: inset 0 0 0 2px var(--sel);
  background: var(--selbg);
}

.task-title {
  overflow-wrap: anywhere;
  flex: 1;
  min-width: 0;
  font-weight: 500;
}

.task-opt .muted {
  white-space: nowrap;
  font-size: 12px;
}

.members-list {
  border-top: 1px solid var(--line);
  margin: 0;
  padding: 0;
  list-style: none;
}

.member {
  border-bottom: 1px solid var(--line);
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 6px 4px;
  display: flex;
}

.who-tx {
  flex-direction: column;
  flex: 1;
  min-width: 0;
  display: flex;
}

.who-tx b {
  font-weight: 500;
}

.who-tx .muted {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  overflow: hidden;
}

.sel {
  min-width: 0;
  display: block;
  position: relative;
}

.sel-btn, .sel-native {
  background: var(--field);
  width: 100%;
  height: 34px;
  color: var(--tx);
  font: inherit;
  text-align: left;
  cursor: pointer;
  border: 1px solid #0000;
  border-radius: 8px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 10px 0 12px;
  display: flex;
}

.sel-btn:hover, .sel-native:hover {
  background: color-mix(in srgb,var(--tx) 7%,var(--field));
}

.sel-btn[aria-expanded="true"] {
  border-color: var(--sel);
  background: var(--panel);
}

.sel-btn:focus-visible, .sel-native:focus-visible {
  outline: 2px solid var(--sel);
  outline-offset: 1px;
}

.sel.invalid .sel-btn, .sel.invalid .sel-native {
  border-color: var(--red);
}

.sel-btn > .ic {
  color: var(--tx2);
  flex-shrink: 0;
  margin-left: auto;
}

.sel-val {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.sel-lead {
  flex-shrink: 0;
  place-items: center;
  display: grid;
}

.sel-lead .ktile {
  border-radius: 5px;
  width: 18px;
  height: 18px;
}

.sel-native {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23757575' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  background-position: right 10px center;
  background-repeat: no-repeat;
  padding-right: 34px;
}

.sel.line .sel-btn, .sel.line .sel-native {
  background-color: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
}

.sel.line .sel-btn:hover {
  box-shadow: inset 0 0 0 1px var(--tx3);
}

.sel.auto {
  width: auto;
  max-width: 240px;
  display: inline-block;
}

.sel.auto .sel-btn {
  width: auto;
  max-width: 240px;
}

.sel-pop {
  z-index: 95;
  background: var(--panel);
  min-width: 180px;
  max-width: min(360px, 100vw - 16px);
  color: var(--tx);
  box-shadow: 0 6px 24px #00000029,0 0 0 1px var(--line);
  overscroll-behavior: contain;
  scrollbar-width: thin;
  border-radius: 8px;
  padding: 4px;
}

:root[data-theme="dark"] .sel-pop {
  box-shadow: 0 8px 28px #0000008c,0 0 0 1px var(--line);
}

.sel-pop ul {
  outline: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sel-search {
  z-index: 1;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  color: var(--tx2);
  align-items: center;
  gap: 6px;
  margin: -4px -4px 4px;
  padding: 8px 10px;
  display: flex;
  position: sticky;
  top: -4px;
}

.sel-search input {
  width: 100%;
  min-width: 0;
  color: var(--tx);
  font: inherit;
  background: none;
  border: 0;
  outline: none;
}

.sel-opt {
  cursor: pointer;
  border-radius: 6px;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 5px 8px;
  line-height: 1.3;
  display: flex;
}

.sel-opt.on {
  background: var(--selbg);
}

.sel-opt[aria-disabled="true"] {
  opacity: .45;
  cursor: default;
}

.sel-opt[aria-selected="true"] .sel-tx {
  font-weight: 600;
}

.sel-tx {
  overflow-wrap: anywhere;
  flex: 1;
  min-width: 0;
}

.sel-hint {
  color: var(--tx2);
  white-space: nowrap;
  font-size: 11px;
}

.sel-check {
  width: 14px;
  color: var(--sel);
  flex-shrink: 0;
  place-items: center;
  display: grid;
}

.sel-group {
  color: var(--tx2);
  padding: 6px 8px 2px;
  font-size: 11px;
  font-weight: 600;
  display: block;
}

.sel-sep {
  background: var(--line);
  height: 1px;
  margin: 4px 2px;
  display: block;
}

.sel-empty {
  color: var(--tx2);
  padding: 8px;
  font-size: 12px;
}

:root[data-theme="dark"] .sel-native {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A3A3A3' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
}

[data-kind="design"] {
  --kc: #0d99ff;
}

[data-kind="board"] {
  --kc: #9747ff;
}

[data-kind="slides"] {
  --kc: #f24822;
}

[data-kind="spec"] {
  --kc: #757575;
}

[data-kind="make"] {
  --kc: #1e1e1e;
}

:root[data-theme="dark"] [data-kind="make"] {
  --kc: #e6e6e6;
  --kfg: #1e1e1e;
}

.ktile {
  background: var(--kc);
  color: var(--kfg, #fff);
  flex-shrink: 0;
  place-items: center;
  display: grid;
}

.new-pill .ktile {
  border-radius: 5px;
  width: 20px;
  height: 20px;
}

.new-pill.more {
  cursor: pointer;
  border: 0;
  gap: 4px;
  padding: 0 11px 0 13px;
}

.new-pill.more[aria-expanded="true"] {
  background: var(--hov);
  box-shadow: inset 0 0 0 1px var(--line);
}

.new-pills .menu-wrap .menu {
  left: 0;
  right: auto;
}

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

@media (min-width: 1280px) {
  .cf {
    grid-template-columns: minmax(0, 1fr) 340px;
  }
}

@media (min-width: 1440px) {
  .cf {
    grid-template-columns: minmax(0, 1fr) 380px;
  }
}

.cf-alert {
  grid-column: 1 / -1;
  margin: 0;
}

.cf-main, .cf-side {
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  display: flex;
}

@media (max-width: 1279px) {
  .cf-side {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    align-items: start;
    display: grid;
  }
}

@media (min-width: 1280px) {
  .cf-side {
    position: sticky;
    top: 16px;
  }
}

.cf-sec {
  border: 0;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  display: flex;
}

.cf-h {
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
}

legend.cf-h {
  margin-bottom: 10px;
}

.cf-note {
  margin: 0;
  font-size: 12px;
}

.cf-card {
  flex-direction: column;
  gap: 12px;
  display: flex;
}

.cf-card .card {
  padding: 0;
}

.cf-field {
  border: 0;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-weight: 500;
  display: flex;
}

.cf-field legend {
  margin-bottom: 5px;
  padding: 0;
  font-weight: 500;
}

.cf-field .hint {
  font-weight: 400;
}

.f.ta {
  resize: vertical;
  height: auto;
  min-height: 64px;
  line-height: 1.45;
  font: inherit;
  padding: 8px 10px;
}

.f.file {
  cursor: pointer;
  height: auto;
  padding: 6px;
}

.f.file::file-selector-button {
  font: inherit;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
  color: var(--tx);
  border: 0;
  border-radius: 6px;
  margin-right: 10px;
  padding: 5px 10px;
}

.f[aria-invalid="true"] {
  border-color: var(--red);
}

.counter {
  align-self: flex-end;
  font-size: 11px;
}

.ferr {
  color: var(--red);
  align-items: center;
  gap: 6px;
  margin: -4px 0 0;
  font-size: 12px;
  display: flex;
}

.lbl-row {
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  display: flex;
}

.lnk {
  color: var(--sel);
  font-size: 12px;
  font-weight: 400;
  text-decoration: none;
}

.lnk:hover {
  text-decoration: underline;
}

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

.kcard {
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
  background: var(--panel);
  border-radius: 10px;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  display: flex;
}

.kcard:hover {
  box-shadow: inset 0 0 0 1px var(--tx3);
}

.kcard .ktile {
  border-radius: 7px;
  width: 30px;
  height: 30px;
}

.kc-tx {
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.kc-tx b {
  font-weight: 600;
}

.kc-tx .muted {
  font-size: 12px;
  line-height: 1.35;
}

.kcard:has(input:checked) {
  box-shadow: inset 0 0 0 2px var(--sel);
  background: var(--selbg);
}

:is(.kcard:has(input:focus-visible), .segopt:has(input:focus-visible), .tpl:has(input:focus-visible), .sizeopt:has(input:focus-visible)) {
  outline: 2px solid var(--sel);
  outline-offset: 2px;
}

.kcard:has(input:disabled) {
  opacity: .55;
  cursor: default;
}

.segs {
  background: var(--field);
  border-radius: 9px;
  flex-wrap: wrap;
  align-self: flex-start;
  gap: 2px;
  max-width: 100%;
  padding: 3px;
  display: flex;
}

.segopt {
  cursor: pointer;
  height: 32px;
  color: var(--tx2);
  white-space: nowrap;
  border-radius: 7px;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  font-weight: 500;
  display: inline-flex;
}

.segopt:hover {
  color: var(--tx);
}

.segopt:has(input:checked) {
  background: var(--panel);
  color: var(--tx);
  box-shadow: 0 1px 2px #0000001a,0 0 0 1px var(--line);
}

.segs.small .segopt {
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
}

.cf-panel {
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  display: flex;
}

.blank-info {
  background: var(--bg2);
  border-radius: 10px;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px;
  display: flex;
}

.blank-info .ktile {
  border-radius: 6px;
  width: 24px;
  height: 24px;
}

.tpl-set, .dup-set {
  border: 0;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  display: flex;
}

.tpls {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  display: grid;
}

.tpl {
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
  background: var(--panel);
  border-radius: 10px;
  flex-direction: column;
  min-width: 0;
  display: flex;
  overflow: hidden;
}

.tpl:hover {
  box-shadow: inset 0 0 0 1px var(--tx3);
}

.tpl:has(input:checked) {
  box-shadow: inset 0 0 0 2px var(--sel);
}

.tpl-th {
  aspect-ratio: 16 / 10;
  border-bottom: 1px solid var(--line);
  display: block;
}

.tpl-tx {
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 10px 12px 12px;
  display: flex;
}

.tpl-tx b {
  font-weight: 600;
}

.tpl-tx .muted {
  font-size: 12px;
  line-height: 1.35;
}

.tpl-tx .chips {
  margin-top: 4px;
}

.th {
  width: 100%;
  height: 100%;
  display: block;
}

.th-page {
  fill: #fff;
}

.th-canvas {
  fill: #f3f4f6;
}

.th-panel {
  fill: #fff;
}

.th-stroke {
  stroke: #e2e4e8;
  stroke-width: .8px;
}

.th-bar {
  fill: #f7f7f8;
}

.th-line {
  fill: #e3e5e8;
}

.th-ink {
  fill: #9aa0a8;
}

.th-img {
  fill: #eceef1;
}

.th-field {
  fill: #f0f1f3;
}

.th-acc {
  fill: var(--kc);
}

.th-acc2 {
  fill: color-mix(in srgb,var(--kc) 22%,#fff);
}

.th-on-acc {
  fill: #fff;
  opacity: .85;
}

.th-bubble {
  fill: color-mix(in srgb,var(--kc) 8%,#fff);
  stroke: color-mix(in srgb,var(--kc) 30%,#fff);
  stroke-width: .8px;
}

.th-dot {
  fill: #d5d8dd;
}

.th-dash {
  fill: none;
  stroke: #c4c8ce;
  stroke-width: .9px;
  stroke-dasharray: 3 2;
}

.th-arrow {
  stroke: #9aa0a8;
  stroke-width: 1.2px;
  fill: none;
}

[data-kind="make"] .th-acc {
  fill: #7c3aed;
}

[data-kind="make"] .th-bubble {
  fill: #f5f0ff;
  stroke: #dccbff;
}

:root[data-theme="dark"] .th-page, :root[data-theme="dark"] .th-panel {
  fill: #2a2a2a;
}

:root[data-theme="dark"] .th-canvas {
  fill: #1a1a1a;
}

:root[data-theme="dark"] .th-stroke {
  stroke: #3a3a3a;
}

:root[data-theme="dark"] .th-bar {
  fill: #303030;
}

:root[data-theme="dark"] .th-line {
  fill: #3d3d3d;
}

:root[data-theme="dark"] .th-ink {
  fill: #6b6b6b;
}

:root[data-theme="dark"] .th-img, :root[data-theme="dark"] .th-field {
  fill: #353535;
}

:root[data-theme="dark"] .th-acc2 {
  fill: color-mix(in srgb,var(--kc) 30%,#2a2a2a);
}

:root[data-theme="dark"] .th-dot {
  fill: #3a3a3a;
}

:root[data-theme="dark"] .th-dash {
  stroke: #555;
}

:root[data-theme="dark"] [data-kind="make"] .th-bubble {
  fill: #2b2440;
  stroke: #4b3d73;
}

.btn.small {
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
}

.lnk-btn {
  color: var(--sel);
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  align-items: center;
  gap: 4px;
  padding: 0;
  font-size: 12px;
  font-weight: 400;
  display: inline-flex;
}

.lnk-btn:hover {
  text-decoration: underline;
}

.help-steps {
  background: var(--bg2);
  border-radius: 8px;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  padding: 10px 12px 10px 30px;
  font-size: 12px;
  font-weight: 400;
  display: flex;
}

.fig-drop {
  margin: 0;
  padding: 22px 14px;
}

:is(.via-file:has(#fig-file:focus-visible) .fig-drop, .via-file:has(#fig-file:focus-visible) .file-chip) {
  outline: 2px solid var(--sel);
  outline-offset: 2px;
}

.file-chip {
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: 10px;
  align-items: center;
  gap: 10px;
  padding: 10px 8px 10px 12px;
  font-weight: 400;
  display: flex;
}

.file-chip.bad {
  box-shadow: inset 0 0 0 1px var(--red);
}

.fc-ic {
  background: var(--selbg);
  width: 32px;
  height: 32px;
  color: var(--sel);
  border-radius: 8px;
  flex-shrink: 0;
  place-items: center;
  display: grid;
}

.fc-tx {
  flex-direction: column;
  flex: 1;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.fc-tx b {
  overflow-wrap: anywhere;
  font-weight: 500;
}

.fc-tx .muted {
  font-size: 12px;
}

.fc-bar {
  background: var(--field);
  border-radius: 2px;
  height: 4px;
  margin-top: 4px;
  display: block;
  overflow: hidden;
}

.fc-bar i {
  background: var(--sel);
  height: 100%;
  transition: width .2s;
  display: block;
}

.empty.small {
  border: 1.5px dashed var(--line);
  border-radius: 10px;
  gap: 8px;
  padding: 20px 12px;
}

input[type="radio"]:not(.sr-only), input[type="checkbox"]:not(.sr-only) {
  appearance: none;
  border: 1.5px solid var(--tx3);
  background: var(--panel);
  cursor: pointer;
  flex-shrink: 0;
  place-items: center;
  width: 16px;
  height: 16px;
  margin: 0;
  transition: border-color .12s, background .12s;
  display: inline-grid;
}

input[type="radio"]:not(.sr-only) {
  border-radius: 50%;
}

input[type="checkbox"]:not(.sr-only) {
  border-radius: 4px;
}

input[type="radio"]:not(.sr-only):checked {
  border: 5px solid var(--sel);
}

input[type="checkbox"]:not(.sr-only):checked {
  border-color: var(--sel);
  background: var(--sel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat;
}

input[type="radio"]:not(.sr-only):hover, input[type="checkbox"]:not(.sr-only):hover {
  border-color: var(--sel);
}

input[type="radio"]:not(.sr-only):focus-visible, input[type="checkbox"]:not(.sr-only):focus-visible {
  outline: 2px solid var(--sel);
  outline-offset: 2px;
}

input[type="number"] {
  appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pending-note {
  background: var(--warnbg);
  color: var(--warn);
  border-radius: 8px;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  font-size: 12px;
  display: flex;
}

.pending-note.vi {
  background: var(--vdbg);
  color: var(--vd);
}

.pending-note .ic {
  margin-top: 1px;
}

.search-f {
  background: var(--field);
  height: 32px;
  color: var(--tx2);
  border-radius: 7px;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  font-weight: 400;
  display: flex;
}

.search-f input {
  width: 100%;
  min-width: 0;
  color: var(--tx);
  font: inherit;
  background: none;
  border: 0;
  outline: none;
}

.search-f:focus-within {
  box-shadow: inset 0 0 0 1px var(--sel);
}

.pick-list {
  flex-direction: column;
  gap: 4px;
  max-height: 320px;
  padding: 2px;
  display: flex;
  overflow: auto;
}

.pick-opt {
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 10px;
  display: flex;
}

.pick-opt[hidden] {
  display: none;
}

.pick-opt:has(input:checked) {
  box-shadow: inset 0 0 0 2px var(--sel);
  background: var(--selbg);
}

.pick-opt input {
  margin: 0;
}

.pick-opt .ktile {
  border-radius: 5px;
  width: 22px;
  height: 22px;
}

.pick-tx {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.pick-tx b {
  overflow-wrap: anywhere;
  font-weight: 500;
}

.pick-tx .muted {
  overflow-wrap: anywhere;
  font-size: 12px;
}

.task-pick .task-list {
  max-height: 220px;
  padding: 2px;
}

.task-pick .task-opt {
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
  border-radius: 8px;
  flex-flow: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 10px;
  font-weight: 400;
  display: flex;
}

.task-pick .task-opt[hidden] {
  display: none;
}

.task-pick .task-opt input {
  margin: 0;
}

.task-pick .check {
  margin: 6px 0 4px;
  font-weight: 400;
}

.task-tools {
  display: block;
}

.sizes {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px;
  display: grid;
}

.sizeopt {
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
  border-radius: 8px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  font-weight: 400;
  display: flex;
}

.sizeopt > span {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.sizeopt b {
  font-weight: 500;
}

.sizeopt .muted {
  white-space: nowrap;
  font-size: 11px;
}

.sizeopt .ic {
  color: var(--tx2);
}

.sizeopt:has(input:checked) {
  box-shadow: inset 0 0 0 2px var(--sel);
  background: var(--selbg);
}

.custom-wh {
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  margin-top: 8px;
  display: none;
}

.custom-wh label {
  flex-direction: column;
  gap: 4px;
  width: 96px;
  font-size: 12px;
  font-weight: 400;
  display: flex;
}

.custom-wh > span[aria-hidden] {
  color: var(--tx2);
  padding-bottom: 7px;
}

.custom-wh .hint {
  flex-basis: 100%;
}

.pv-art {
  aspect-ratio: 16 / 10;
  box-shadow: inset 0 0 0 1px var(--line);
  background: var(--bg2);
  border-radius: 10px;
  overflow: hidden;
}

.pv-name {
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.pv-name .ktile {
  border-radius: 5px;
  width: 22px;
  height: 22px;
}

.pv-name b {
  overflow-wrap: anywhere;
  font-weight: 600;
}

.pv-rows {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 12px;
  margin: 0;
  font-size: 12px;
  display: grid;
}

.pv-rows dt {
  color: var(--tx2);
}

.pv-rows dd {
  overflow-wrap: anywhere;
  min-width: 0;
  margin: 0;
}

.pv-task {
  display: none;
}

.cf-sum .row-end {
  margin-top: 4px;
}

.cf:has(#k-design:checked) .kshow:not(.k-design) {
  display: none !important;
}

.cf:has(#k-board:checked) .kshow:not(.k-board) {
  display: none !important;
}

.cf:has(#k-slides:checked) .kshow:not(.k-slides) {
  display: none !important;
}

.cf:has(#k-spec:checked) .kshow:not(.k-spec) {
  display: none !important;
}

.cf:has(#k-make:checked) .kshow:not(.k-make) {
  display: none !important;
}

.cf:has(#f-blank:checked) .fshow:not(.f-blank) {
  display: none !important;
}

.cf:has(#f-template:checked) .fshow:not(.f-template) {
  display: none !important;
}

.cf:has(#f-figma:checked) .fshow:not(.f-figma) {
  display: none !important;
}

.cf:has(#f-duplicate:checked) .fshow:not(.f-duplicate) {
  display: none !important;
}

.cf:has(#k-make:checked) .nomake {
  display: none !important;
}

.cf:has(#f-duplicate:checked) .nodup {
  display: none !important;
}

.cf:has(#f-figma:checked) .size-sec {
  display: none !important;
}

.cf:has(#f-duplicate:checked) .size-sec {
  display: none !important;
}

.cf:has(#v-link:checked) .via-file {
  display: none !important;
}

.cf:has(#v-file:checked) .via-link {
  display: none !important;
}

.cf:not(:has(#k-design:checked)) .seg-figma {
  display: none;
}

.lbl-make {
  display: none;
}

.cf:has(#k-make:checked) .lbl-make {
  display: inline;
}

.cf:has(#k-make:checked) .lbl-blank {
  display: none;
}

.cf:has(#s-custom:checked) .custom-wh {
  display: flex;
}

.cf:has(#t-all:not(:checked)) .task-opt[data-open="0"] {
  display: none;
}

.btn-fig {
  display: none;
}

.cf:has(#k-design:checked):has(#f-figma:checked):has(#v-file:checked) .btn-fig {
  display: inline-flex;
}

.cf:has(#k-design:checked):has(#f-figma:checked):has(#v-file:checked) .btn-main {
  display: none;
}

html[data-hydrated] .cf .btn-fig {
  display: none !important;
}

html[data-hydrated] .cf .btn-main {
  display: inline-flex !important;
}

.np-h {
  color: var(--tx2);
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 600;
}

.np-list {
  flex-direction: column;
  gap: 2px;
  max-height: 260px;
  margin: 0;
  padding: 3px;
  list-style: none;
  display: flex;
  overflow: auto;
}

.np-it {
  color: var(--tx);
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  text-decoration: none;
  display: flex;
}

.np-it:hover {
  background: var(--hov);
}

.np-it > .ic {
  color: var(--tx2);
}

.np-ic {
  border-radius: 7px;
  flex-shrink: 0;
  place-items: center;
  width: 28px;
  height: 28px;
  display: grid;
}

.np-name {
  overflow-wrap: anywhere;
  flex: 1;
  min-width: 0;
  font-weight: 500;
}

.np-desk {
  background: var(--bg2);
  color: var(--tx2);
  border-radius: 8px;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  display: flex;
}

.np-desk p {
  margin: 0;
}

.np-desk .ic {
  margin-top: 1px;
}

.lib-tile {
  background: var(--vdbg);
  width: 36px;
  height: 36px;
  color: var(--vd);
  border-radius: 9px;
  flex-shrink: 0;
  place-items: center;
  display: grid;
}

.lib-tile[data-lib="templates"] {
  background: color-mix(in srgb,#9747ff 14%,var(--panel));
  color: #8638e5;
}

.lib-tile[data-lib="icons"] {
  background: color-mix(in srgb,#f24822 12%,var(--panel));
  color: #d9361a;
}

.lib-tile[data-lib="kit"], .lib-tile[data-lib="local"] {
  background: var(--bg2);
  color: var(--tx2);
}

:root[data-theme="dark"] .lib-tile[data-lib="templates"] {
  color: #b794ff;
}

:root[data-theme="dark"] .lib-tile[data-lib="icons"] {
  color: #ff8a70;
}

.lib-search {
  background: var(--field);
  height: 34px;
  color: var(--tx2);
  border-radius: 8px;
  flex: 0 340px;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 0 10px;
  display: flex;
}

.lib-search input {
  width: 100%;
  min-width: 0;
  color: var(--tx);
  font: inherit;
  background: none;
  border: 0;
  outline: none;
}

.lib-search:focus-within {
  box-shadow: inset 0 0 0 1px var(--sel);
  background: var(--panel);
}

.lib-cards {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
  display: grid;
}

.lib-card {
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--tx);
  background: var(--panel);
  border-radius: 12px;
  align-items: flex-start;
  gap: 12px;
  height: 100%;
  padding: 14px;
  text-decoration: none;
  display: flex;
}

.lib-card:hover {
  box-shadow: inset 0 0 0 1px var(--tx3),0 2px 8px #0000000d;
}

.lib-card.off {
  opacity: .7;
}

.lib-card-tx {
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  display: flex;
}

.lib-card-tx b {
  overflow-wrap: anywhere;
  font-weight: 600;
}

.lib-card-tx .chip, .lib-head .chip, .lib-row .chip, .blk-meta .chip {
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: none;
  height: auto;
  min-height: 18px;
  padding: 2px 6px;
  overflow: visible;
}

.lib-card-tx .muted {
  font-size: 12px;
  line-height: 1.4;
}

.lib-found {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
  display: grid;
}

.lib-found-it {
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--tx);
  border-radius: 10px;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px;
  text-decoration: none;
  display: flex;
}

.lib-found-it:hover {
  background: var(--hov);
}

.lib-found-pv {
  aspect-ratio: 16 / 10;
  width: 64px;
  box-shadow: inset 0 0 0 1px var(--line);
  --kc: var(--vd);
  background: var(--bg2);
  border-radius: 6px;
  flex-shrink: 0;
  place-items: center;
  display: grid;
  overflow: hidden;
}

.lib-found-tx {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.lib-found-tx b {
  overflow-wrap: anywhere;
  font-weight: 500;
}

.lib-found-tx .muted {
  overflow-wrap: anywhere;
  font-size: 12px;
}

.lib-icon-pv {
  color: var(--tx);
  place-items: center;
  display: grid;
}

.crumbs {
  color: var(--tx2);
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 12px;
  display: flex;
}

.crumbs a {
  color: var(--tx2);
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--sel);
  text-decoration: underline;
}

.lib-head {
  align-items: flex-start;
}

.lib-head-tx {
  flex: 420px;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  display: flex;
}

.lib-head-tx > div {
  min-width: 0;
}

.lib-head-tx .chips {
  margin-top: 8px;
}

.lib-org {
  color: var(--tx2);
  white-space: nowrap;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  display: flex;
}

.lib-tools {
  align-items: flex-start;
  gap: 12px;
}

.cat-chips {
  flex-wrap: wrap;
  flex: 400px;
  gap: 6px;
  min-width: 0;
  display: flex;
}

.cat-chip {
  background: var(--field);
  height: 30px;
  color: var(--tx);
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 0 11px;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
}

.cat-chip span {
  color: var(--tx2);
  font-weight: 400;
}

.cat-chip:hover {
  background: var(--hov);
  box-shadow: inset 0 0 0 1px var(--line);
}

.cat-chip.on {
  background: var(--selbg);
  color: var(--sel);
  box-shadow: inset 0 0 0 1px var(--sel);
}

.cat-chip.on span {
  color: var(--sel);
}

.mono {
  font: 500 11px/1.4 var(--mono);
  color: var(--tx2);
  overflow-wrap: anywhere;
}

.blk-grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.blk-card, .tpl-cell {
  border: 1px solid var(--line);
  color: var(--tx);
  background: var(--panel);
  border-radius: 10px;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  display: flex;
  overflow: hidden;
}

.blk-card:hover {
  border-color: var(--tx3);
  box-shadow: 0 2px 8px #0000000d;
}

.blk-card:focus-visible {
  outline: 2px solid var(--sel);
  outline-offset: 2px;
}

.blk-th {
  aspect-ratio: 16 / 10;
  border-bottom: 1px solid var(--line);
  display: block;
}

.blk-card .blk-th {
  --kc: var(--vd);
}

.blk-tx {
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 10px 12px 12px;
  display: flex;
}

.blk-tx b {
  overflow-wrap: anywhere;
  font-weight: 600;
  line-height: 1.3;
}

.blk-tx .muted {
  font-size: 12px;
  line-height: 1.35;
}

.tpl-cell .btn {
  align-self: flex-start;
  margin: 0 12px 12px;
}

.ico-grid {
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.ico-cell {
  box-shadow: inset 0 0 0 1px var(--line);
  text-align: center;
  border-radius: 10px;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 14px 8px 8px;
  display: flex;
}

.ico-cell:focus-within {
  box-shadow: inset 0 0 0 1px var(--sel);
}

.ico-pv {
  background: var(--bg2);
  width: 44px;
  height: 44px;
  color: var(--tx);
  border-radius: 10px;
  place-items: center;
  display: grid;
}

.ico-actions {
  gap: 2px;
  display: flex;
}

.modal:has(#m-block) {
  width: 700px;
}

.blk-head {
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  display: flex;
}

.blk-pv {
  aspect-ratio: 16 / 10;
  width: 180px;
  box-shadow: inset 0 0 0 1px var(--line);
  --kc: var(--vd);
  border-radius: 8px;
  flex-shrink: 0;
  overflow: hidden;
}

.blk-meta {
  flex-direction: column;
  flex: 260px;
  gap: 6px;
  min-width: 0;
  display: flex;
}

.blk-meta p {
  margin: 0;
  line-height: 1.45;
}

.blk-sec {
  border-top: 1px solid var(--line);
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  display: flex;
}

.blk-sec h3 {
  margin: 0;
  font-size: 13px;
}

.blk-sec h3 .muted {
  font-weight: 400;
}

.blk-sec > p {
  margin: 0;
}

.var-list, .prop-list {
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.var-list li {
  flex-direction: column;
  gap: 5px;
  display: flex;
}

.var-name {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  display: flex;
}

.var-values {
  flex-wrap: wrap;
  gap: 4px;
  display: flex;
}

.var-values .chip, .blk-sec .chips .chip {
  white-space: normal;
  max-width: none;
  height: auto;
  min-height: 20px;
  padding: 2px 7px;
}

.chip.on {
  background: var(--selbg);
  color: var(--sel);
  box-shadow: inset 0 0 0 1px var(--sel);
}

.prop-list li {
  border-bottom: 1px dashed var(--line);
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 6px;
  display: flex;
}

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

.prop-list li > span {
  overflow-wrap: anywhere;
  min-width: 0;
}

.req {
  color: var(--red);
}

.lib-rows {
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.lib-row {
  border-bottom: 1px solid var(--line);
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  display: flex;
}

.lib-row:last-child {
  border-bottom: 0;
}

.lib-row .lib-tile {
  border-radius: 8px;
  width: 30px;
  height: 30px;
}

.lib-row-tx {
  flex-direction: column;
  flex: 1;
  min-width: 0;
  display: flex;
}

.lib-row-tx b {
  overflow-wrap: anywhere;
  font-weight: 500;
}

.lib-row-tx .muted {
  overflow-wrap: anywhere;
  font-size: 12px;
}

.sw-form {
  margin: 0;
  display: contents;
}

.sw {
  background: var(--tx3);
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  flex-shrink: 0;
  width: 34px;
  height: 20px;
  padding: 0;
  transition: background .15s;
  position: relative;
}

.sw i {
  background: #fff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  transition: transform .15s;
  position: absolute;
  top: 2px;
  left: 2px;
  box-shadow: 0 1px 2px #00000040;
}

.sw.on {
  background: var(--sel);
}

.sw.on i {
  transform: translateX(14px);
}

.sw:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.sw:focus-visible {
  outline: 2px solid var(--sel);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .sw, .sw i {
    transition: none;
  }
}

.toast-host {
  z-index: 120;
  pointer-events: none;
  max-width: calc(100vw - 32px);
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
}

.toast {
  color: #fff;
  background: #1e1e1e;
  border-radius: 9px;
  padding: 9px 14px;
  font-weight: 500;
  animation: .16s ease-out toast-in;
  box-shadow: 0 6px 20px #00000040;
}

:root[data-theme="dark"] .toast {
  background: #3a3a3a;
  box-shadow: 0 6px 20px #00000080, 0 0 0 1px #ffffff14;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    animation: none;
  }
}

@media (max-width: 1100px) {
  .fkind {
    display: none;
  }
}

@media (max-width: 760px) {
  .home {
    grid-template-columns: minmax(0, 1fr);
  }

  .side {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    height: auto;
    position: static;
  }

  .main {
    padding: 16px;
  }
}

.hsearch-f {
  margin: 0 0 4px;
}

.sbox {
  background: var(--field);
  height: 32px;
  color: var(--tx2);
  border-radius: 7px;
  align-items: center;
  gap: 6px;
  padding: 0 6px 0 10px;
  display: flex;
  position: relative;
}

.sbox:focus-within {
  box-shadow: inset 0 0 0 1px var(--sel);
  background: var(--panel);
}

.sbox input {
  min-width: 0;
  height: 100%;
  color: var(--tx);
  background: none;
  border: 0;
  outline: none;
  flex: 1;
  padding: 0;
}

.sbox input::placeholder {
  color: var(--tx2);
}

.sbox-x {
  width: 20px;
  height: 20px;
  color: var(--tx2);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 5px;
  flex: none;
  place-items: center;
  display: grid;
}

.sbox-x:hover {
  background: var(--hov);
  color: var(--tx);
}

.sbox-pop {
  z-index: 60;
  background: var(--panel);
  color: var(--tx);
  box-shadow: 0 8px 28px #00000029,0 0 0 1px var(--line);
  border-radius: 10px;
  min-width: 240px;
  padding: 6px;
}

.sbox-h {
  color: var(--tx2);
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 6px 8px;
  font-size: 11px;
  display: flex;
}

.sbox-clear {
  color: var(--sel);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 4px;
  padding: 2px 4px;
  font-size: 11px;
  font-weight: 500;
}

.sbox-clear:hover {
  background: var(--selbg);
}

.sbox-empty {
  color: var(--tx2);
  margin: 0;
  padding: 6px 8px 8px;
  font-size: 12px;
}

.sbox-pop ul {
  flex-direction: column;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.sbox-it {
  cursor: pointer;
  height: 32px;
  color: var(--tx);
  border-radius: 6px;
  align-items: center;
  gap: 8px;
  padding: 0 4px 0 8px;
  display: flex;
}

.sbox-it .ic {
  color: var(--tx2);
}

.sbox-it.on {
  background: var(--selbg);
}

.sbox-tx {
  overflow-wrap: anywhere;
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}

.sbox-rm {
  width: 22px;
  height: 22px;
  color: var(--tx2);
  cursor: pointer;
  opacity: 0;
  background: none;
  border: 0;
  border-radius: 5px;
  flex: none;
  place-items: center;
  display: grid;
}

.sbox-it:hover .sbox-rm, .sbox-it.on .sbox-rm, .sbox-rm:focus-visible {
  opacity: 1;
}

.sbox-rm:hover {
  background: var(--hov);
  color: var(--tx);
}

.tip {
  z-index: 100;
  color: #fff;
  max-width: 260px;
  font: 500 11px/1.35 var(--font);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background: #1e1e1e;
  border-radius: 6px;
  padding: 5px 8px;
  transition: opacity .12s, transform .12s;
  position: fixed;
  top: 0;
  left: 0;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px #0003;
}

.tip.on {
  opacity: 1;
  visibility: visible;
  transform: none;
}

:root[data-theme="dark"] .tip {
  background: #3a3a3a;
  box-shadow: 0 4px 14px #00000080, 0 0 0 1px #ffffff14;
}

@media (prefers-reduced-motion: reduce) {
  .tip {
    transition: none;
  }
}

* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb,var(--tx) 22%,transparent) transparent;
}

/*# sourceMappingURL=%5Broot-of-the-server%5D__0vunmy~._.css.map*/