/* ydisk · amber glass (по мотивам acheives frontend/src/index.css, cyan → amber) */
:root {
  --background: #140e06;
  --foreground: #fff7ea;
  --card: #241708;
  --card-foreground: #fff7ea;
  --popover: #1e130a;
  --popover-foreground: #fff7ea;
  --primary: #fbbf24;
  --primary-foreground: #2a1a05;
  --secondary: #33220f;
  --secondary-foreground: #ffe9c4;
  --muted: #2b1e0e;
  --muted-foreground: #c9ab7f;
  --accent: #4a2f10;
  --accent-foreground: #ffefcf;
  --destructive: #f0544f;
  --destructive-foreground: #fff1f0;
  --border: rgba(251, 191, 36, 0.18);
  --input: rgba(251, 191, 36, 0.22);
  --ring: #fbbf24;
  --mouse-x: 50%;
  --mouse-y: 50%;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0; color: var(--foreground); background-color: var(--background);
  background-image:
    radial-gradient(circle at 18% 22%, rgba(251, 191, 36, 0.16), transparent 24%),
    radial-gradient(circle at 78% 18%, rgba(245, 158, 11, 0.10), transparent 24%),
    linear-gradient(160deg, #120b04, #2e1d08 120%);
  background-attachment: fixed;
  font-family: "Segoe UI", "Trebuchet MS", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* фон: glow, следящий за курсором (как body::before на mnova.ru) */
body::before {
  content: "";
  position: fixed;
  width: 460px;
  height: 460px;
  left: calc(var(--mouse-x) - 230px);
  top: calc(var(--mouse-y) - 230px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.16), transparent 68%);
  filter: blur(30px);
  pointer-events: none;
  transition: left 0.25s ease-out, top 0.25s ease-out;
}
::selection { background: rgba(251, 191, 36, 0.35); }
a { color: var(--primary); }
.muted { color: var(--muted-foreground); font-size: 0.9em; }
code.tok { display: inline-block; word-break: break-all; font-size: 0.82em;
  max-width: 100%; margin-bottom: 6px; color: #ffe9c4; }

/* decorative layers (Backdrop как в acheives + анимация фона с mnova.ru) */
.mnova-glow { position: fixed; inset: auto 50% 6%; width: min(60vw,560px); height: min(60vw,560px);
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(251,191,36,0.20), rgba(245,158,11,0.08) 48%, transparent 72%);
  filter: blur(40px); pointer-events: none;
  animation: mnova-pulse 9s ease-in-out infinite; }
.mnova-sparks, .mnova-sparks::before, .mnova-sparks::after {
  position: fixed; inset: 0; content: ""; pointer-events: none; background-repeat: repeat; }
.mnova-sparks {
  background-image:
    radial-gradient(circle, rgba(253,230,180,0.55) 0 1.4px, transparent 2.6px),
    radial-gradient(circle, rgba(255,244,220,0.5) 0 1px, transparent 2.2px),
    radial-gradient(circle, rgba(251,191,36,0.45) 0 1.2px, transparent 2.4px);
  background-size: 180px 180px, 250px 250px, 320px 320px;
  background-position: 14% 100%, 78% 96%, 48% 88%;
  opacity: 0.62;
  animation: mnova-drift 12s linear infinite; }
.mnova-sparks::before {
  background-image:
    radial-gradient(circle, rgba(255,244,214,0.86) 0 1.2px, transparent 2.2px),
    radial-gradient(circle, rgba(251,191,36,0.72) 0 1.7px, transparent 2.7px);
  background-size: 160px 160px, 280px 280px;
  background-position: 26% 104%, 60% 100%;
  opacity: 0.48;
  animation: mnova-drift 16s linear infinite; }
.mnova-sparks::after {
  background-image:
    radial-gradient(circle, rgba(255,236,190,0.82) 0 1.4px, transparent 2.4px),
    radial-gradient(circle, rgba(245,158,11,0.7) 0 1.8px, transparent 2.8px);
  background-size: 210px 210px, 300px 300px;
  background-position: 68% 102%, 36% 106%;
  opacity: 0.42;
  animation: mnova-drift 18s linear infinite; }
@keyframes mnova-drift {
  0% { transform: translateY(0); }
  100% { transform: translateY(-180px); }
}
@keyframes mnova-pulse {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.85; }
  50% { transform: translateX(-50%) scale(1.08); opacity: 1; }
}
.mnova-shell { position: relative; z-index: 1; width: min(1080px, calc(100vw - 28px)); margin: 14px auto;
  min-height: calc(100vh - 28px); border-radius: 30px; border: 1px solid rgba(255,255,255,0.22);
  background: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03)), rgba(20,12,4,0.28);
  backdrop-filter: blur(16px) saturate(145%);
  box-shadow: 0 26px 90px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.18);
  overflow: hidden; padding: 28px; }
.glass { border-radius: 22px; border: 1px solid rgba(255,255,255,0.22);
  background: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03)), rgba(20,12,4,0.28);
  backdrop-filter: blur(16px) saturate(145%);
  box-shadow: 0 20px 70px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.16); }
.glass-soft { border: 1px solid rgba(255,255,255,0.14); border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)), rgba(20,14,6,0.4);
  backdrop-filter: blur(12px); padding: 16px; }

.brand { display: flex; align-items: baseline; gap: 8px; }
.brand b { font-size: 1.15em; color: #fff; }
.brand span { color: var(--muted-foreground); font-size: 0.9em; }

input[type=text], input[type=email], input[type=password] {
  width: 100%; padding: 10px 12px; min-height: 44px; font-size: 15px; color: var(--foreground);
  background: rgba(0,0,0,0.3); border: 1px solid var(--input); border-radius: 12px; }
input:focus { outline: 2px solid var(--ring); }
button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; min-height: 44px;
  font-size: 15px; font-weight: 600; cursor: pointer; border: 0; border-radius: 12px;
  background: var(--primary); color: var(--primary-foreground); text-decoration: none; }
button:disabled { opacity: 0.6; cursor: default; }
.btn-ghost { background: var(--secondary); color: var(--secondary-foreground); }
.btn-danger { background: var(--destructive); color: var(--destructive-foreground); }
label { font-size: 0.85em; color: var(--muted-foreground); }

table { width: 100%; border-collapse: collapse; font-size: 0.92em; }
th { text-align: left; font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted-foreground); padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.1); }
td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.8em; font-weight: 600; }
.b-queued { background: rgba(255,255,255,0.12); color: #fff; }
.b-running { background: rgba(251,191,36,0.18); color: #ffd98a; }
.b-done { background: rgba(72,218,158,0.18); color: #a9f0d4; }
.b-error { background: rgba(240,84,79,0.18); color: #ffb3b0; }

.bar { height: 12px; background: rgba(255,255,255,0.10); border-radius: 7px; overflow: hidden; margin: 6px 0; }
.bar > i { display: block; height: 100%; width: 0; background: var(--primary); transition: width 0.3s; }
.token-banner { background: rgba(251,191,36,0.12); border: 1px solid var(--primary);
  border-radius: 12px; padding: 12px; word-break: break-all; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.cards { display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 768px) { .cards-mobile { display: none; } }

/* мобильный вид: таблицы превращаются в карточки, ничего не скрываем */
@media (max-width: 767px) {
  .table-desktop { display: block; }
  .table-desktop table { display: block; border-collapse: separate; }
  .table-desktop thead { display: none; }
  .table-desktop tbody,
  .table-desktop tr { display: block; }
  .table-desktop tr {
    border: 1px solid rgba(255,255,255,0.12); border-radius: 16px;
    margin: 0 0 12px; padding: 12px 14px; background: rgba(0,0,0,0.20);
  }
  .table-desktop td { display: block; border: 0; padding: 4px 0; }
  .table-desktop td:last-child {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;
    padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.08);
  }
}

/* иконочные кнопки (тач-таргет >= 44x44) */
.iconbtn { padding: 10px; min-height: 44px; min-width: 44px; justify-content: center; }
.iconbtn svg { display: block; }
.btn-ghost.iconbtn { color: var(--secondary-foreground); }
.btn.iconbtn, a.btn.iconbtn { color: var(--primary-foreground); }
.btn-danger.iconbtn { color: var(--destructive-foreground); }
.iconbtn.copied { background: rgba(72,218,158,0.22); color: #a9f0d4; }
.del-form { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.err { background: rgba(240,84,79,0.14); border: 1px solid rgba(240,84,79,0.4);
  border-radius: 12px; padding: 10px 12px; }

/* модальное окно: плеер и подтверждение удаления */
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  padding: 18px; background: rgba(8, 5, 2, 0.62); backdrop-filter: blur(8px);
  animation: mnova-fade 0.18s ease-out; }
.modal[hidden] { display: none; }
.modal-card { width: min(640px, 100%); max-height: calc(100vh - 36px); overflow: auto;
  padding: 22px; }
.modal-card.modal-player { width: min(920px, 100%); }
.modal-card video { width: 100%; max-height: 70vh; border-radius: 14px; background: #000;
  display: block; }
.modal-card .btn-danger { margin-left: auto; }
@keyframes mnova-fade { from { opacity: 0; } to { opacity: 1; } }