/*
 * ZZZ Cloud // Inter-Knot inspired FileBrowser theme
 * Visual reference: https://github.com/KawaYiLab/InterKnot-Web (MIT)
 * FileBrowser v2 custom-branding stylesheet.
 */

:root {
  color-scheme: dark;
  --ik-black: #000;
  --ik-bg: #090909;
  --ik-panel: rgba(18, 18, 18, .94);
  --ik-panel-solid: #121212;
  --ik-card: rgba(34, 34, 34, .94);
  --ik-elevated: #2d2c2d;
  --ik-line: #3a3a3a;
  --ik-text: #f2f2ee;
  --ik-muted: #a0a09a;
  --ik-primary: #bfff09;
  --ik-primary-hot: #e8ff44;
  --ik-cyan: #00e5ff;
  --ik-danger: #ff5252;
  --ik-warning: #ffe600;
  --ik-radius: 22px 0 22px 22px;
  --ik-radius-sm: 10px 0 10px 10px;
  --ik-shadow: 8px 8px 0 rgba(0, 0, 0, .55);
  --ik-speed: 150ms ease;
}

* { box-sizing: border-box; }

html,
body {
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  color: var(--ik-text);
  background: var(--ik-bg);
  font-family: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Three repeating rows inside #app. Rotation is embedded in each SVG, so the
   app-sized background itself stays rectangular and behind the UI. */
body::before,
body::after { display: none !important; content: none !important; }

#app::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: none;
  background-repeat: repeat-x;
  background-size: 200% 33.333%, 200% 33.333%, 200% 33.333%;
  background-position: 0 0, 0 50%, 0 100%;
  animation: none;
}

#app {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  background: transparent !important;
}

/* Final app-sized tracks: override the earlier experimental layer with three
   full-viewport repeating rows. */
body::before,
body::after,
#app::before {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-image: none !important;
  background-repeat: repeat-x !important;
  background-size: 220% 33.333% !important;
  z-index: 0 !important;
}

body::before { clip-path: inset(0 0 66.667% 0) !important; background-position: 0 0; animation: ik-zzz-marquee-ltr 400s linear infinite !important; }
body::after { clip-path: inset(33.333% 0 33.333% 0) !important; background-position: 0 50%; animation: ik-zzz-marquee-rtl 480s linear infinite !important; }
#app::before { clip-path: inset(66.667% 0 0 0) !important; background-position: 0 100%; animation: ik-zzz-marquee-ltr 400s linear infinite !important; animation-delay: -140s !important; }

@keyframes ik-zzz-marquee-ltr {
  from { background-position-x: 0; }
  to { background-position-x: -100%; }
}

@keyframes ik-zzz-marquee-rtl {
  from { background-position-x: -100%; }
  to { background-position-x: 0; }
}

::selection { color: #000; background: var(--ik-primary); }
a { color: inherit; text-decoration: none; }
button,
input,
textarea,
select { font: inherit; }
button,
a,
.action { -webkit-tap-highlight-color: transparent; }

/* App chrome */
header {
  min-height: 68px;
  color: var(--ik-text);
  background:
    repeating-linear-gradient(40deg, transparent 0 6px, rgba(255, 255, 255, .035) 6px 10px),
    rgba(8, 8, 8, .94);
  border: 0;
  border-bottom: 4px solid var(--ik-black);
  box-shadow: 0 2px 0 var(--ik-line), 0 10px 30px rgba(0, 0, 0, .4);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: min(34vw, 420px);
  height: 4px;
  background: var(--ik-primary);
  box-shadow: calc(min(34vw, 420px) + 12px) 0 0 var(--ik-cyan);
}

header img,
#logo img {
  content: url("/static/img/logo.png");
  object-fit: contain;
}

#login img {
  content: url("/static/img/avatar.png");
  object-fit: contain;
}

header img,
#logo img {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 11px 0 11px 11px;
  filter: drop-shadow(4px 4px 0 #000);
}

#sidebar {
  color: var(--ik-text);
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .022) 0 4px, transparent 4px 9px),
    rgba(13, 13, 13, .95);
  border: 0;
  border-right: 4px solid #000;
  box-shadow: 2px 0 0 var(--ik-line), 12px 0 28px rgba(0, 0, 0, .35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#sidebar::after {
  content: "// ZZZ STORAGE";
  display: block;
  margin: 18px 14px;
  padding: 8px 10px;
  color: #000;
  background: var(--ik-primary);
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  transform: rotate(-2deg);
}

#sidebar a,
#sidebar .action,
.action {
  margin: 3px 8px;
  border: 1px solid transparent;
  border-radius: var(--ik-radius-sm);
  color: var(--ik-muted);
  transition: color var(--ik-speed), background var(--ik-speed), border-color var(--ik-speed), transform var(--ik-speed);
}

#sidebar a:hover,
#sidebar .action:hover,
.action:hover,
#sidebar a.active,
#sidebar [aria-current="page"] {
  color: #000;
  background: var(--ik-primary);
  border-color: #000;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .2);
}

#sidebar a:hover,
#sidebar .action:hover { transform: translateX(3px); }

#main,
#listing,
#search,
.dashboard { color: var(--ik-text); background: transparent; }

/* Breadcrumb / toolbar */
#breadcrumbs {
  color: var(--ik-muted);
  background: rgba(0, 0, 0, .76);
  border: 3px solid var(--ik-elevated);
  border-radius: var(--ik-radius-sm);
  box-shadow: inset 0 0 0 2px #000, 4px 4px 0 rgba(0, 0, 0, .4);
}

#breadcrumbs a { color: var(--ik-text); font-weight: 700; }
#breadcrumbs a:hover { color: var(--ik-primary); }

#listing h2,
#search .boxes h3,
.dashboard h2,
.dashboard h3 {
  color: var(--ik-text);
  font-family: "Arial Black", Impact, "Noto Sans SC", sans-serif;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-shadow: 3px 3px 0 #000;
}

#listing h2::before,
.dashboard h2::before {
  content: "//";
  margin-right: .38em;
  color: var(--ik-primary);
  letter-spacing: -.1em;
  text-shadow: none;
}

/* File list and grid */
#listing.list,
#listing.grid {
  margin: 12px;
  padding: 12px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(34, 34, 34, .74), rgba(13, 13, 13, .78)),
    repeating-linear-gradient(40deg, transparent 0 5px, rgba(255, 255, 255, .04) 5px 10px);
  border: 4px solid var(--ik-elevated);
  border-radius: var(--ik-radius);
  box-shadow: inset 0 0 0 3px #000, var(--ik-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#listing.list .item.header {
  color: #000;
  background:
    linear-gradient(rgba(255, 255, 255, .13), rgba(255, 255, 255, 0)),
    var(--ik-primary);
  border: 2px solid #000;
  border-radius: var(--ik-radius-sm);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

#listing .item {
  color: var(--ik-text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  transition: color var(--ik-speed), background var(--ik-speed), transform var(--ik-speed), box-shadow var(--ik-speed);
}

#listing .item:hover {
  color: #fff;
  background: rgba(191, 255, 9, .10);
  box-shadow: inset 4px 0 0 var(--ik-primary);
  transform: translateX(2px);
}

#listing .item[aria-selected="true"] {
  color: #000 !important;
  background: var(--ik-primary) !important;
  box-shadow: inset 0 0 0 2px #000 !important;
}

#listing .item[aria-selected="true"] * { color: #000 !important; }
.file-icons [data-dir="true"] i,
.file-icons [data-dir="true"] svg { color: var(--ik-primary) !important; }
.file-icons i,
.file-icons svg { transition: color var(--ik-speed), transform var(--ik-speed); }
#listing .item:hover .file-icons i,
#listing .item:hover .file-icons svg { transform: rotate(-4deg) scale(1.06); }

#listing.grid .item {
  margin: 6px;
  background: rgba(0, 0, 0, .52);
  border: 2px solid var(--ik-line);
  border-radius: var(--ik-radius-sm);
  box-shadow: 3px 3px 0 #000;
}

#listing.grid .item:hover { border-color: var(--ik-primary); }

/* Search */
#search {
  z-index: 20;
  overflow: visible;
  background: rgba(0, 0, 0, .40);
}

#search:not(.active) #result {
  display: none;
}

#search.active {
  position: fixed !important;
  z-index: 9999;
  inset: 0 !important;
  width: 100vw !important;
  max-width: none !important;
  height: 100vh !important;
  padding: 28px 20px 22px;
  overflow: auto;
  background:
    repeating-linear-gradient(135deg, transparent 0 7px, rgba(255, 255, 255, .025) 7px 10px),
    rgba(5, 5, 5, .94);
}

#search #input,
#search #result,
#search .boxes,
#search .boxes > div > div {
  color: var(--ik-text);
  background: var(--ik-panel);
  border: 3px solid var(--ik-elevated);
  border-radius: var(--ik-radius-sm);
  box-shadow: inset 0 0 0 2px #000, 5px 5px 0 rgba(0, 0, 0, .48);
}

#search .boxes > div > div { color: #000; background: var(--ik-primary); }
#search .boxes > div > div:hover { background: var(--ik-primary-hot); transform: translateY(-1px); }

#search #input {
  min-height: 52px;
  padding: 4px 12px;
  border-width: 3px;
  border-radius: 12px 0 12px 12px;
}

#search:not(.active) #input {
  height: 50px;
  min-height: 50px;
}

#search.active #input {
  position: relative;
  width: min(980px, calc(100vw - 40px));
  height: 58px;
  min-height: 58px;
  margin: 0 auto;
  padding: 5px 14px;
  color: var(--ik-text) !important;
  background:
    linear-gradient(180deg, rgba(45, 45, 45, .98), rgba(15, 15, 15, .98)),
    repeating-linear-gradient(45deg, transparent 0 6px, rgba(255, 255, 255, .04) 6px 9px) !important;
  border: 3px solid var(--ik-primary) !important;
  border-radius: 20px 0 20px 20px !important;
  box-shadow: inset 0 0 0 2px #000, 6px 6px 0 rgba(0, 0, 0, .7), 0 0 0 1px rgba(191, 255, 9, .18) !important;
  transition: border-color var(--ik-speed), box-shadow var(--ik-speed);
}

#search.active #input:focus-within {
  border-color: var(--ik-primary-hot) !important;
  box-shadow: inset 0 0 0 2px #000, 6px 6px 0 rgba(0, 0, 0, .7), 0 0 18px rgba(191, 255, 9, .2) !important;
}

#search #input input {
  height: 42px;
  min-height: 42px;
  padding: 0 12px;
  border: 0 !important;
  border-radius: 10px !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  line-height: 42px;
  color: var(--ik-text) !important;
  caret-color: var(--ik-primary) !important;
  font-size: 1.05rem;
  font-weight: 600;
}

#search #input input::placeholder {
  color: var(--ik-muted) !important;
  opacity: .9;
}

#search:not(.active) #input input {
  height: 34px;
  min-height: 34px;
  line-height: 34px;
}

#search #result {
  position: relative;
  max-height: calc(100vh - 5em);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: var(--ik-primary) #111;
}

#search:not(.active) #result {
  height: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}

#search.active #result {
  height: calc(100% - 4em);
  min-height: 0;
  width: min(1180px, calc(100vw - 32px));
  margin: 18px auto 0;
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(25, 25, 25, .97), rgba(10, 10, 10, .97)),
    repeating-linear-gradient(40deg, transparent 0 6px, rgba(255, 255, 255, .03) 6px 10px) !important;
  border-color: var(--ik-line) !important;
  box-shadow: inset 0 0 0 2px #000, 6px 6px 0 rgba(0, 0, 0, .62) !important;
}

#search.active #result > div {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding-bottom: 2em;
}

#search .boxes {
  display: none !important;
  overflow: visible;
  padding: 12px;
}

#search .boxes > div {
  gap: 10px;
  margin: 0;
}

#search .boxes > div > div {
  min-height: 58px;
  margin: 0;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Panels, dashboard and tables */
.card,
.dashboard .card,
.share__box,
.share__box__download,
.shell,
.ace-chrome {
  color: var(--ik-text);
  background:
    linear-gradient(180deg, rgba(34, 34, 34, .86), rgba(18, 18, 18, .88)),
    repeating-linear-gradient(40deg, transparent 0 6px, rgba(255, 255, 255, .03) 6px 10px);
  border: 4px solid var(--ik-elevated) !important;
  border-radius: var(--ik-radius) !important;
  box-shadow: inset 0 0 0 3px #000, var(--ik-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.card:hover { border-color: var(--ik-primary) !important; }
.card h3,
.collapsible > label *,
.dashboard p label,
.message { color: var(--ik-primary); }
.dashboard p,
.credits { color: var(--ik-muted); }

.dashboard #nav ul li {
  color: var(--ik-muted);
  border: 1px solid transparent;
  border-radius: var(--ik-radius-sm);
  transition: color var(--ik-speed), background var(--ik-speed);
}

.dashboard #nav ul li:hover,
.dashboard #nav ul li.active {
  color: #000;
  background: var(--ik-primary);
  border-color: #000;
}

table { color: var(--ik-text); background: transparent; }
table th {
  color: #000;
  background: var(--ik-primary);
  border-color: #000;
  font-weight: 900;
}
table td { border-color: var(--ik-line); }

/* Form controls */
.input,
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  color: #fff !important;
  background: #1c1c1c !important;
  border: 3px solid #323232 !important;
  border-radius: 999px !important;
  outline: 1px solid #000;
  caret-color: var(--ik-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  transition: border-color var(--ik-speed), box-shadow var(--ik-speed), background var(--ik-speed);
}

textarea { border-radius: 14px !important; }
select { color-scheme: dark; }
.input::placeholder,
input::placeholder,
textarea::placeholder { color: #767676 !important; }

.input:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--ik-primary) !important;
  box-shadow: 0 0 0 3px rgba(191, 255, 9, .15), inset 0 0 0 1px #000 !important;
}

.button,
#login .button {
  position: relative;
  overflow: hidden;
  padding: .72em 1.28em;
  color: #000 !important;
  background:
    linear-gradient(rgba(255, 255, 255, .16), rgba(255, 255, 255, 0)),
    repeating-linear-gradient(45deg, transparent 0 5px, rgba(0, 0, 0, .07) 5px 9px),
    var(--ik-primary) !important;
  border: 1px solid #000 !important;
  border-radius: 8px 0 8px 8px !important;
  outline: 0;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .16), 4px 4px 0 #000;
  font-weight: 900;
  letter-spacing: .02em;
  text-shadow: none;
  transition: transform var(--ik-speed), filter var(--ik-speed), background var(--ik-speed);
}

.button:hover,
#login .button:hover {
  color: #000 !important;
  background-color: var(--ik-primary-hot) !important;
  filter: brightness(1.08);
  transform: translate(-1px, -1px);
}

.button:active,
#login .button:active { transform: translate(2px, 2px); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .12), 1px 1px 0 #000; }

.button--flat {
  color: var(--ik-text) !important;
  background: #222 !important;
  border-color: #3a3a3a !important;
}
.button--flat:hover { color: var(--ik-primary) !important; background: #111 !important; }

input[type="checkbox"],
input[type="radio"] { accent-color: var(--ik-primary); }
.vue-simple-progress { overflow: hidden; background: #222 !important; border: 2px solid #000; border-radius: 999px; }
.vue-simple-progress-bar { background: linear-gradient(90deg, var(--ik-primary), var(--ik-cyan)) !important; }

/* Selection, overlays and feedback */
#listing #multiple-selection {
  color: #000;
  background: var(--ik-primary);
  border: 3px solid #000;
  border-radius: 14px 0 0 0;
  box-shadow: 0 -5px 0 var(--ik-elevated);
}

.overlay {
  background:
    repeating-linear-gradient(40deg, transparent 0 4px, rgba(255, 255, 255, .055) 4px 8px),
    rgba(0, 0, 0, .78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Keep FileBrowser's native three-dot splash and request indicators. */
#loading .spinner {
  width: 70px !important;
  height: auto !important;
  aspect-ratio: auto;
  padding: 0 !important;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

#loading .spinner > div {
  display: inline-block !important;
  width: 18px;
  height: 18px;
  margin: 0 2px;
  background: var(--ik-primary);
  border-radius: 100%;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

main .spinner > div,
#previewer .spinner > div,
#editor-container .spinner > div {
  display: inline-block !important;
  background: var(--ik-primary) !important;
  box-shadow: 0 0 12px rgba(191, 255, 9, .35);
}
.wrong,
.error { color: #fff; background: var(--ik-danger); border-radius: var(--ik-radius-sm); }

/* Loading screen */
#loading {
  position: fixed;
  overflow: hidden;
  color: var(--ik-text);
  background: #000 !important;
}

/* Login must explicitly reset FileBrowser's fixed layout values. */
#login {
  position: fixed !important;
  z-index: 2;
  top: 0 !important;
  right: 0 !important;
  bottom: -96px !important;
  left: 0 !important;
  width: 100vw !important;
  height: auto !important;
  min-height: 100vh;
  overflow: hidden;
  color: var(--ik-text);
  background: #e7e5e1 !important;
  isolation: isolate;
}

#login::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -4%;
  pointer-events: none;
  background: url("/static/img/login.jpg") center / cover no-repeat;
  transform: none;
}

#login::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, transparent 20%, rgba(0, 0, 0, .15) 100%),
    repeating-linear-gradient(40deg, transparent 0 5px, rgba(0, 0, 0, .025) 5px 9px);
}

#login form {
  position: absolute !important;
  z-index: 1;
  top: 50vh !important;
  left: 50% !important;
  width: calc(100vw - 36px);
  max-width: 380px !important;
  margin: 0 !important;
  padding: 30px 30px 26px;
  overflow: visible;
  transform: translate(-50%, -50%) !important;
  color: var(--ik-text);
  background:
    linear-gradient(180deg, rgba(34, 34, 34, .97), rgba(12, 12, 12, .97)),
    repeating-linear-gradient(40deg, transparent 0 5px, rgba(255, 255, 255, .04) 5px 10px);
  border: 4px solid var(--ik-elevated);
  border-radius: 26px 0 26px 26px;
  box-shadow: inset 0 0 0 3px #000, 12px 12px 0 rgba(0, 0, 0, .68), 0 26px 70px rgba(0, 0, 0, .55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#login form::before {
  content: "FILE ACCESS // LOGIN";
  position: absolute;
  top: -15px;
  left: 18px;
  padding: 8px 15px;
  color: #000;
  background: #ff4fa3;
  border: 2px solid #000;
  box-shadow: 3px 3px 0 #000;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  transform: rotate(-1.5deg);
}

#login form::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -4px;
  width: 58px;
  height: 15px;
  background: #ff4fa3;
  border-left: 3px solid #000;
  border-bottom: 3px solid #000;
}

#login img {
  width: 92px;
  height: 92px;
  margin: 4px auto 14px;
  border: 3px solid #fff;
  outline: 3px solid #000;
  border-radius: 20px 0 20px 20px;
  object-fit: cover;
  filter: drop-shadow(5px 5px 0 #000);
}

#login h1,
#login h2 {
  margin: 14px 0 20px;
  color: #fff;
  font-family: "Arial Black", Impact, "Noto Sans SC", sans-serif;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#login h1 { font-size: clamp(1.55rem, 4vw, 2rem); }
#login .input { width: 100%; margin: 7px 0; background: #151515 !important; }
#login .input:focus { border-color: #ff4fa3 !important; box-shadow: 0 0 0 3px rgba(255, 79, 163, .18) !important; }
#login .button {
  width: 100%;
  margin-top: 11px;
  background:
    linear-gradient(rgba(255, 255, 255, .18), rgba(255, 255, 255, 0)),
    repeating-linear-gradient(45deg, transparent 0 5px, rgba(0, 0, 0, .07) 5px 9px),
    #ff4fa3 !important;
}
#login .button:hover { background-color: #ff79b9 !important; }
#login p { color: #ff79b9; }
#login .wrong { padding: 10px 14px; border: 2px solid #000; box-shadow: 3px 3px 0 #000; }

@media (max-width: 760px) {
  header { min-height: 60px; }
  header img,
  #logo img { width: 38px; height: 38px; }
  #sidebar { box-shadow: 2px 0 0 var(--ik-line), 14px 0 30px rgba(0, 0, 0, .55); }
  #listing.list,
  #listing.grid { margin: 7px; padding: 6px; border-width: 3px; }
  #login::before { background-position: 42% center; }
  #login form { padding: 28px 22px 24px; border-radius: 22px 0 22px 22px; }
  #login form::before { left: 14px; font-size: 10px; }
  .card,
.dashboard .card { border-width: 3px !important; box-shadow: inset 0 0 0 2px #000, 5px 5px 0 rgba(0, 0, 0, .58); }
  #search.active { padding: 18px 10px 14px; }
  #search.active #input { width: calc(100vw - 20px); }
  #search.active #result { width: calc(100vw - 20px); margin-top: 14px; padding: 12px; }
}

/* Match the reference mobile band enlargement. */
@media (max-width: 1024px) {
  body::before,
  body::after,
  #app::before {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
}

/* FileBrowser's breadcrumb is sticky by default; keep it in normal flow so it
   cannot cover the toolbar or the first file row. */
.breadcrumbs,
#breadcrumbs {
  position: relative !important;
  top: auto !important;
  z-index: 5;
  width: calc(100% - 24px);
  min-height: 48px;
  height: auto;
  margin: 12px;
  padding: 8px 16px;
  color: var(--ik-text) !important;
  background: rgba(18, 18, 18, .92) !important;
  border: 3px solid var(--ik-elevated) !important;
  border-radius: var(--ik-radius-sm);
  box-shadow: inset 0 0 0 2px #000, 4px 4px 0 rgba(0, 0, 0, .48);
  overflow: hidden;
}

.breadcrumbs a,
#breadcrumbs a { color: var(--ik-primary) !important; }
.breadcrumbs a:hover,
#breadcrumbs a:hover { color: var(--ik-primary-hot) !important; background: transparent !important; }
.breadcrumbs span { min-width: 0; }

@media (max-width: 760px) {
  .breadcrumbs,
  #breadcrumbs { width: calc(100% - 14px); margin: 7px; padding: 7px 11px; }
}

/* Three non-overlapping app-sized marquee tracks. */
body::before,
body::after,
#app::before {
  content: "" !important;
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-image: none !important;
  background-repeat: repeat-x !important;
  background-size: 220% 33.333% !important;
  opacity: .74;
  will-change: background-position;
}

body::before { clip-path: inset(0 0 66.667% 0) !important; background-position: 0 0; animation: ik-ref-marquee-left-top 34s linear infinite !important; }
body::after { clip-path: inset(33.333% 0 33.333% 0) !important; background-position: 0 50%; animation: ik-ref-marquee-right-middle 40s linear infinite !important; }
#app::before { clip-path: inset(66.667% 0 0 0) !important; background-position: 0 100%; animation: ik-ref-marquee-left-bottom 29s linear infinite !important; }

#app::after,
#main::before {
  display: none !important;
  content: none !important;
  animation: none !important;
}

#app > * {
  z-index: 1;
}

/* Pure-CSS marquee tracks. Each pseudo-element is a full app-sized clipped
   lane; the oversized track keeps both viewport edges covered while moving. */
body::before,
body::after,
#app::before {
  content: none !important;
  display: block !important;
  position: fixed !important;
  left: -100% !important;
  top: 0 !important;
  width: 300% !important;
  height: 100vh !important;
  overflow: hidden !important;
  z-index: 0 !important;
  pointer-events: none !important;
  color: rgba(255, 255, 255, .075) !important;
  background: none !important;
  font-family: "Arial Black", Impact, sans-serif !important;
  font-size: clamp(240px, 32vw, 400px) !important;
  font-weight: 800 !important;
  line-height: .74 !important;
  letter-spacing: -.055em !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
  text-indent: 0;
  transform: rotate(-12deg) !important;
  transform-origin: center center !important;
  will-change: text-indent;
}

body::before {
  clip-path: inset(0 0 66.667% 0) !important;
  padding-top: 0;
  animation: ik-css-marquee-left 34s linear infinite !important;
}

body::after {
  clip-path: inset(33.333% 0 33.333% 0) !important;
  padding-top: 33.333vh;
  animation: ik-css-marquee-right 40s linear infinite !important;
}

#app::before {
  clip-path: inset(66.667% 0 0 0) !important;
  padding-top: 66.667vh;
  animation: ik-css-marquee-left 29s linear infinite !important;
  animation-delay: -9s !important;
}

@keyframes ik-css-marquee-left {
  from { text-indent: -33.333%; }
  to { text-indent: 0; }
}

@keyframes ik-css-marquee-right {
  from { text-indent: 0; }
  to { text-indent: -33.333%; }
}

@keyframes ik-ref-marquee-left-top {
  from { background-position: 0 0; }
  to { background-position: -100% 0; }
}

@keyframes ik-ref-marquee-right-middle {
  from { background-position: -100% 50%; }
  to { background-position: 0 50%; }
}

@keyframes ik-ref-marquee-left-bottom {
  from { background-position: 0 100%; }
  to { background-position: -100% 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  body::before,
  body::after,
  #login::before,
  #app::before { animation: none !important; }
}

/* Final static-branding pass: the home screen uses only the supplied artwork.
   Disable all legacy marquee layers left by earlier theme revisions. */
html,
body {
  background: var(--ik-bg) !important;
}

#login {
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
}

#login::before {
  inset: 0 !important;
  background: url("/static/img/login.jpg") center / cover no-repeat !important;
}

body::after,
#app::before,
#app::after,
#main::before {
  display: none !important;
  content: none !important;
  background: none !important;
  animation: none !important;
}

/* Responsive 150% zoomed home artwork. The enlarged fixed layer still uses
   cover, so every viewport ratio remains completely filled while resizing. */
body::before {
  display: block !important;
  content: "" !important;
  position: fixed !important;
  z-index: 0 !important;
  inset: -25% !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  pointer-events: none !important;
  background: url("/static/img/main.avif") center / cover no-repeat !important;
  clip-path: none !important;
  transform: none !important;
  transform-origin: center !important;
  text-indent: 0 !important;
  opacity: 1 !important;
  filter: none !important;
  animation: none !important;
}

header img,
#logo img {
  content: url("/static/img/logo.png") !important;
}

#login img {
  content: url("/static/img/avatar.png") !important;
}

/* Use the supplied cursor set according to interaction type. */
:root {
  --cursor-default: url("/static/img/cursors/正常选择.png") 2 1, auto;
  --cursor-pointer: url("/static/img/cursors/链接选择.png") 14 3, pointer;
  --cursor-text: url("/static/img/cursors/文本选择.png") 16 16, text;
  --cursor-progress: url("/static/img/cursors/后台加载.png") 2 1, progress;
  --cursor-wait: url("/static/img/cursors/忙.png") 2 1, wait;
  --cursor-move: url("/static/img/cursors/移动.png") 16 16, move;
  --cursor-not-allowed: url("/static/img/cursors/不可用.png") 16 14, not-allowed;
}

html,
body { cursor: var(--cursor-default); }
a,
button,
.action,
[role="button"] { cursor: var(--cursor-pointer) !important; }
input,
textarea,
select,
[contenteditable="true"] { cursor: var(--cursor-text) !important; }
button:disabled,
[aria-disabled="true"],
.is-disabled { cursor: var(--cursor-not-allowed) !important; }
[aria-busy="true"],
.is-loading { cursor: var(--cursor-progress) !important; }

/* FileBrowser v2.43 Share.vue: input-group contains VueNumberInput + select. */
.input-group.input {
  padding: 8px !important;
  border-radius: 999px !important;
}

.input-group.input .vue-number-input {
  overflow: hidden !important;
  border: 2px solid #484848 !important;
  border-radius: var(--ik-radius-sm) !important;
  background: #181818 !important;
  box-shadow: inset 0 0 0 1px #000 !important;
}

.input-group.input .vue-number-input .vue-number-input__input {
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 44px !important;
  color: var(--ik-text) !important;
  background: #1d1d1d !important;
  border: 0 !important;
  border-radius: var(--ik-radius-sm) !important;
  box-shadow: inset 0 0 0 2px #000 !important;
  line-height: 46px !important;
  text-align: center !important;
  vertical-align: middle;
  font-size: 1.05rem;
  font-weight: 800;
}

.input-group.input select {
  min-height: 46px !important;
  margin-left: 7px !important;
  padding: 0 30px 0 12px !important;
  color: var(--ik-text) !important;
  background: #202020 !important;
  border: 2px solid #484848 !important;
  border-radius: var(--ik-radius-sm) !important;
  outline: 1px solid #000 !important;
  box-shadow: inset 0 0 0 1px #000 !important;
  line-height: 42px !important;
  text-align: center;
  font-weight: 700;
}

/* Keep the share dialog's compact button dimensions local to that dialog. */
.input-group.input .vue-number-input__button {
  width: 38px !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 2px !important;
}

/* Settings' numeric rows use the same chamfered square treatment.  The
   generic form rule above intentionally makes ordinary inputs pill-shaped,
   so explicitly opt the VueNumberInput field and shell into this style. */
.vue-number-input {
  border-radius: var(--ik-radius-sm) !important;
}

.vue-number-input input.vue-number-input__input {
  border-radius: var(--ik-radius-sm) !important;
}

/* Settings page: reuse the same ZZZ button skin while retaining its native
   width/height so the existing settings layout does not shift. */
.vue-number-input__button {
  color: var(--ik-primary) !important;
  background:
    repeating-linear-gradient(45deg, transparent 0 5px, rgba(255, 255, 255, .05) 5px 9px),
    #222 !important;
  border: 2px solid #000 !important;
  border-radius: var(--ik-radius-sm) !important;
  box-shadow: inset 0 0 0 1px var(--ik-line), 2px 2px 0 #000 !important;
  transform: none !important;
}

.vue-number-input__button--minus {
  border-radius: var(--ik-radius-sm) !important;
}

.vue-number-input__button--plus {
  border-radius: 0 10px 10px 10px !important;
}

.vue-number-input__button:hover {
  color: #000 !important;
  background: var(--ik-primary) !important;
}

.vue-number-input__button:before,
.vue-number-input__button:after {
  background: currentColor !important;
}