@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap");
:root {
  --bg: #faf9ff;
  --card: #ffffff;
  --card2: #f5f2fd;
  --accent: #7c3aed;
  --accent2: #a855f7;
  --fg: #1b1433;
  --mut: #6b6486;
  --dim: #8d87a8;
  --line: rgba(25,18,51,.14);
  font-family: Inter, system-ui, Arial, sans-serif;
  color: var(--fg);
  background: var(--bg);
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(
      circle at 78% 4%,
      rgba(124,58,237,0.12),
      transparent 27%
    ),
    var(--bg);
}
button,
input,
select,
textarea {
  font: inherit;
}
.topbar {
  height: 72px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 max(24px, calc((100vw - 1480px) / 2));
  background: rgba(250,249,255,.9);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(16px);
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: white;
}
.brandIcon {
  width: 39px;
  height: 39px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  font-size: 20px;
  box-shadow: 0 10px 30px rgba(124,58,237,0.25);
}
.brand > span:last-child {
  display: flex;
  flex-direction: column;
}
.brand b {
  font:
    800 18px Manrope,
    Inter,
    Arial,
    sans-serif;
}
.brand small {
  font-size: 10px;
  color: var(--mut);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.topStatus {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--mut);
  font-size: 11px;
}
.topStatus i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 12px #16a34a;
}
.appShell {
  width: min(1480px, calc(100% - 32px));
  margin: 24px auto 42px;
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 18px;
}
.controlPanel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.panelIntro {
  padding: 17px 5px 8px;
}
.panelIntro > span,
.workspaceHead > div > span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--accent);
}
.panelIntro h1 {
  font:
    800 33px/1 Manrope,
    Inter,
    Arial,
    sans-serif;
  margin: 8px 0 10px;
  letter-spacing: -0.045em;
}
.panelIntro h1 em {
  font-style: normal;
  color: var(--accent);
}
.panelIntro p {
  font-size: 12px;
  line-height: 1.6;
  color: var(--mut);
  margin: 0;
}
fieldset {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.16);
}
legend {
  padding: 0 10px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.modeSwitch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #f5f2fd;
  border: 1px solid var(--line);
  padding: 4px;
  border-radius: 11px;
  margin-bottom: 14px;
}
.modeSwitch button {
  border: 0;
  background: transparent;
  color: var(--dim);
  padding: 9px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
}
.modeSwitch button.active {
  background: var(--card2);
  color: white;
  box-shadow: 0 6px 18px #0003;
}
.platformList {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-bottom: 14px;
}
.platformList button {
  position: relative;
  border: 1px solid var(--line);
  background: #f3f0fa;
  color: var(--mut);
  border-radius: 10px;
  padding: 9px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  cursor: pointer;
}
.platformList button span {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: #e9e2fa;
  color: white;
  font-weight: 800;
}
.platformList button.active {
  border-color: rgba(124,58,237,0.55);
  background: rgba(124,58,237,0.1);
  color: white;
}
.platformList .locked {
  opacity: 0.38;
  cursor: not-allowed;
}
.platformList .locked i {
  font-style: normal;
  font-size: 7px;
  letter-spacing: 0.08em;
  margin-left: auto;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: var(--mut);
  font-size: 10px;
  margin-top: 11px;
}
.field small {
  color: var(--dim);
}
input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: #f5f2fd;
  color: white;
  border-radius: 10px;
  padding: 11px 12px;
  outline: none;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.08);
}
textarea {
  height: 105px;
  resize: vertical;
}
.queryLine,
.folderLine {
  display: flex;
}
.queryLine input,
.folderLine input {
  border-radius: 10px 0 0 10px;
}
.queryLine .browserLogin,
.folderLine button {
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: 0 10px 10px 0;
  background: var(--card2);
  color: var(--accent);
  padding: 0 13px;
  cursor: pointer;
}
.browserLogin {
  min-width: 46px;
  width: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 0;
  font-weight: 700;
  background: #f4f7fb !important;
  color: var(--accent) !important;
  border-color: transparent !important;
}
.browserLogin::before {
  content: "🌐";
  font-size: 18px;
}
.browserLogin::after {
  content: none;
}
.browserLogin:hover {
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.18);
}
.browserState {
  color: var(--accent) !important;
  min-height: 13px;
}
.browserState.error {
  color: #e05576 !important;
}
.contentTabs {
  display: flex;
  gap: 6px;
  margin-top: 11px;
}
.contentTabs button {
  flex: 1;
  border: 1px solid var(--line);
  background: #f5f2fd;
  color: var(--dim);
  border-radius: 9px;
  padding: 9px 5px;
  font-size: 10px;
  cursor: pointer;
}
.contentTabs button.active {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #efeafb;
  border-color: transparent;
  font-weight: 800;
}
.primary,
.upload,
.actionGrid button,
.linkMeta button {
  border: 1px solid var(--line);
  background: var(--card2);
  color: white;
  border-radius: 10px;
  padding: 10px 11px;
  cursor: pointer;
  font-weight: 600;
  font-size: 11px;
}
.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #efeafb;
  border: 0;
}
.full {
  width: 100%;
  margin-top: 13px;
  padding: 12px;
}
.twoButtons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 9px;
}
.upload {
  text-align: center;
}
.upload input {
  display: none;
}
.linkMeta {
  display: flex;
  align-items: center;
  margin-top: 7px;
}
.linkMeta span {
  font-size: 10px;
  color: var(--dim);
}
.linkMeta button {
  margin-left: auto;
  padding: 5px 9px;
}
.archive {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--mut);
  font-size: 10px;
  margin-top: 13px;
}
.archive input {
  width: auto;
  accent-color: var(--accent);
}
.actionGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.actionGrid button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.actionGrid .stop {
  color: #e05576;
}
.workspace {
  min-height: 760px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(
    145deg,
    rgba(255,255,255,.94),
    rgba(250,249,255,.94)
  );
  padding: 26px;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.2);
}
.workspaceHead {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: 20px;
}
.workspaceHead h2 {
  font:
    800 28px Manrope,
    Inter,
    Arial,
    sans-serif;
  margin: 5px 0 2px;
}
.workspaceHead p {
  color: var(--mut);
  font-size: 11px;
  margin: 0;
}
.selectionPill {
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
  text-align: right;
  display: flex;
  flex-direction: column;
}
.selectionPill b {
  color: var(--accent);
  font-size: 13px;
}
.selectionPill small {
  font-size: 8px;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.emptyState {
  min-height: 610px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}
.emptyState > div {
  width: 66px;
  height: 66px;
  border: 1px solid rgba(124,58,237,0.3);
  border-radius: 19px;
  display: grid;
  place-items: center;
  color: var(--accent);
  font-size: 26px;
  background: rgba(124,58,237,0.05);
}
.emptyState h3 {
  font:
    700 18px Manrope,
    Inter,
    Arial,
    sans-serif;
  margin: 16px 0 5px;
}
.emptyState p {
  color: var(--dim);
  font-size: 11px;
}
.loader {
  width: 48px;
  height: 48px;
  border: 3px solid var(--card2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.mediaGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
  max-height: 670px;
  overflow: auto;
  padding-right: 5px;
}
.media {
  border: 1px solid var(--line);
  border-radius: 13px;
  overflow: hidden;
  background: #f5f2fd;
  cursor: pointer;
  transition: 0.18s;
}
.media:hover {
  transform: translateY(-2px);
  border-color: rgba(124,58,237,0.35);
}
.media.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(124,58,237,0.12);
}
.thumb {
  aspect-ratio: 16/10;
  background: var(--card2);
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.check {
  position: absolute;
  left: 8px;
  top: 8px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid #ffffff55;
  border-radius: 7px;
  background: #faf9ffcc;
  color: white;
}
.selected .check {
  background: var(--accent);
  color: #efeafb;
  border-color: var(--accent);
}
.thumb small {
  position: absolute;
  right: 7px;
  bottom: 7px;
  background: #faf9ffdd;
  padding: 3px 5px;
  border-radius: 5px;
  font-size: 9px;
}
.mediaText {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mediaText b {
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mediaText span {
  font-size: 8px;
  color: var(--dim);
}
.progressCard {
  margin-top: 20px;
  border: 1px solid var(--line);
  background: #f5f2fd;
  border-radius: 15px;
  padding: 17px;
}
.progressTop {
  display: flex;
  align-items: center;
}
.progressTop div {
  display: flex;
  flex-direction: column;
}
.progressTop small {
  color: var(--accent);
  font-size: 9px;
  text-transform: uppercase;
}
.progressTop b {
  font-size: 11px;
  margin-top: 3px;
}
.progressTop strong {
  margin-left: auto;
  font:
    800 22px Manrope,
    Inter,
    Arial,
    sans-serif;
}
.progressCard progress {
  width: 100%;
  height: 7px;
  margin: 13px 0;
  accent-color: var(--accent);
}
.progressMeta {
  display: flex;
  gap: 15px;
  color: var(--mut);
  font-size: 9px;
}
.downloadLog {
  max-height: 100px;
  overflow: auto;
  color: var(--dim);
  font: 9px/1.5 monospace;
  margin-top: 10px;
}
.downloadLog .warning{color:#a855f7}.downloadLog .error{color:#d93a55}.downloadLog .success{color:#16a34a;font-weight:700;margin-bottom:5px}
footer {
  width: min(1480px, calc(100% - 32px));
  margin: 0 auto 25px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  display: flex;
  gap: 12px;
  color: var(--dim);
  font-size: 10px;
}
footer b {
  color: var(--mut);
}
.hidden {
  display: none !important;
}
@media (max-width: 1050px) {
  .appShell {
    grid-template-columns: 290px minmax(0, 1fr);
  }
  .mediaGrid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 760px) {
  .appShell {
    grid-template-columns: 1fr;
  }
  .workspace {
    min-height: 500px;
  }
  .emptyState {
    min-height: 380px;
  }
  .mediaGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Engine maintenance dialog */
:root{--navy:#faf9ff;--panel:#ffffff;--panel2:#f5f2fd;--cyan:#7c3aed;--blue:#a855f7;--text:#1b1433;--muted:#6b6486;--border:rgba(25,18,51,.14);--orange:#7c3aed;--orange2:#a855f7}body{background:radial-gradient(circle at 12% -8%,#eee7fb 0,transparent 30%),radial-gradient(circle at 90% 4%,#f3e8f6 0,transparent 26%),#faf9ff}.topbar{background:#faf9ffe8}.controlPanel fieldset,.workspace,.engineDialog{background:linear-gradient(145deg,#ffffff,#f7f4fe);border-color:rgba(25,18,51,.12)}.primary,.contentTabs button.active,.modeSwitch button.active{background:linear-gradient(100deg,#7c3aed,#a855f7)!important}.panelIntro em,.workspaceHead>div>span,fieldset legend,.engineEyebrow{color:#a855f7}.brandIcon{background:linear-gradient(135deg,#7c3aed,#7c3aed)!important}.healthButton{margin-left:8px;display:flex;align-items:center;gap:7px;border:1px solid rgba(25,18,51,.12);border-radius:999px;padding:9px 13px;background:#ffffff;color:#6b6486}.healthButton i{width:7px;height:7px;border-radius:50%;background:#7c3aed;box-shadow:0 0 10px #7c3aed}.platformHealthList{display:grid;gap:9px;margin:18px 0}.healthRow{display:grid;grid-template-columns:10px 1fr auto;gap:12px;align-items:center;padding:13px;border:1px solid rgba(25,18,51,.14);border-radius:12px;background:#faf9ff}.healthDot{width:9px;height:9px;border-radius:50%;background:#7c3aed}.healthRow>div{display:flex;flex-direction:column;gap:3px}.healthRow small{color:#8d87a8}.healthRow em{max-width:310px;color:#6b6486;font-size:11px;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.healthRow strong{font-size:11px}.healthRow.working .healthDot,.healthLegend .working{color:#16a34a;background:#16a34a}.healthRow.working strong{color:#16a34a}.healthRow.login .healthDot,.healthRow.engine .healthDot{background:#a855f7}.healthRow.login strong,.healthRow.engine strong,.healthLegend .login{color:#a855f7}.healthRow.changed .healthDot,.healthRow.attention .healthDot{background:#d93a55}.healthRow.changed strong,.healthRow.attention strong,.healthLegend .changed{color:#d93a55}.healthLegend{display:flex;flex-wrap:wrap;gap:14px;color:#6b6486;font-size:10px}.healthLegend .working{background:none}.healthRefresh{margin-top:17px;display:block!important}.healthLoading{padding:25px;text-align:center;color:#6b6486}@media(max-width:650px){.healthButton span{display:none}.healthRow{grid-template-columns:10px 1fr}.healthRow>strong{grid-column:2}.topStatus{padding:8px}.topStatus span{display:none}}
.engineMessage.working{color:#7c3aed}.engineMessage.success{color:#16a34a}.engineMessage.failure{color:#d93a55}.topStatus.failed{border-color:#f0b9c4;background:#fdecf0}.topStatus.failed i{background:#d93a55;box-shadow:0 0 10px #d93a55}.topStatus .ready{color:#16a34a}.topStatus .bad{color:#d93a55}
.topStatus{font:inherit;color:inherit}.engineModal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px;background:#1b143355;backdrop-filter:blur(10px)}.engineDialog{position:relative;width:min(520px,100%);padding:28px;border:1px solid #ded7f0;border-radius:22px;background:linear-gradient(145deg,#ffffff,#f5f2fd);box-shadow:0 28px 90px #000a}.engineClose{position:absolute;right:15px;top:12px;border:0;background:transparent;color:#6b6486;font-size:25px}.engineEyebrow{color:#7c3aed;font-size:11px;font-weight:800;letter-spacing:.18em}.engineDialog h3{margin:9px 0 7px;font-size:23px}.engineDialog>p{color:#6b6486;font-size:13px;line-height:1.5}.engineVersions{margin:20px 0;display:grid;gap:8px}.engineVersions div{display:flex;justify-content:space-between;padding:11px 13px;border:1px solid #ded7f0;border-radius:10px;background:#f5f2fd}.engineVersions span{color:#7c3aed;font:12px Consolas}.engineMessage{min-height:20px;color:#6b6486;font-size:12px;line-height:1.45}.engineActions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.engineActions button{border:1px solid #ded7f0;border-radius:10px;padding:11px;background:#f3edff;color:#6d28d9}.engineActions .primary{display:block;background:linear-gradient(90deg,#7c3aed,#a855f7);color:#ffffff}.engineActions button:disabled{opacity:.5}
/* Live ClipCut Studio palette */
:root{--bg:#faf9ff;--card:#ffffff;--card2:#f5f2fd;--accent:#7c3aed;--accent2:#a855f7;--fg:#1b1433;--mut:#6b6486;--dim:#8d87a8;--line:rgba(25,18,51,.14)}
/* Self-healing engine repair */
.autoRepairBadge{display:flex;align-items:center;gap:11px;margin:15px 0;padding:12px 13px;border:1px solid #7c3aed66;border-radius:12px;background:#7c3aed14}.autoRepairBadge>i{width:10px;height:10px;border-radius:50%;background:#16a34a;box-shadow:0 0 12px #16a34a}.autoRepairBadge span{display:flex;flex-direction:column}.autoRepairBadge b{color:#1b1433;font-size:12px}.autoRepairBadge small{margin-top:2px;color:#6b6486;font-size:10px}.healthRow em.repairNote{color:#a855f7;white-space:normal;margin-top:3px}
/* Application version updater */
.appUpdateButton i{background:#a855f7;box-shadow:0 0 10px #a855f7}.appUpdateButton.available{border-color:#7c3aed;background:#7c3aed18;color:#a855f7}.appUpdateButton.available i{background:#7c3aed;box-shadow:0 0 11px #7c3aed}.appUpdateButton.checked i{background:#16a34a;box-shadow:0 0 10px #16a34a}@media(max-width:760px){.appUpdateButton span{display:none}}
/* Public Linux deployment: the server manages download storage */
.folderLine:has(#chooseFolder.hidden) #folder{border-radius:10px}
.downloadToPc{margin-top:14px;width:100%;border:0;border-radius:11px;padding:13px 16px;background:linear-gradient(100deg,#7c3aed,#a855f7);color:#ffffff;font-weight:800;box-shadow:0 10px 28px #7c3aed38}.downloadToPc:hover{filter:brightness(1.08)}