/* ====== MVFX.PRO — Dark, compact, clean ====== */
@font-face{font-family:"MVFX";src:url("/assets/fonts/regular.otf") format("opentype");font-display:swap}
@font-face{font-family:"MVFX";src:url("/assets/fonts/bold.otf") format("opentype");font-weight:700;font-display:swap}
@font-face{font-family:"MVFX";src:url("/assets/fonts/light.otf") format("opentype");font-weight:300;font-display:swap}

:root{
  --bg:#0d0e12; --fg:#e9edf2; --muted:#a5a9b4;
  --panel:#13151d; --panel2:#0f1117; --line:#24263a;
  --g1:#ff1970; --g2:#7a5cff;
  --radius:16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:"MVFX",system-ui,-apple-system,Segoe UI,Roboto,Arial}

/* Header */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(13,14,18,.9);backdrop-filter:blur(6px);z-index:50}
.brand{font-weight:700;letter-spacing:.28em;font-size:13px}
.topbar nav a{margin-left:18px;opacity:.8;color:inherit;text-decoration:none}
.topbar nav a.active,.topbar nav a:hover{opacity:1}

/* Layout */
.container{max-width:1160px;margin:24px auto;padding:0 16px}

/* Controls */
.controls{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.controls input,.controls select{background:#0f1117;border:1px solid var(--line);color:var(--fg);padding:10px 12px;border-radius:12px;min-height:40px}
.btn{background:#171927;border:1px solid var(--line);color:var(--fg);border-radius:12px;padding:10px 14px;cursor:pointer}
.btn-primary{background:linear-gradient(135deg,var(--g1),var(--g2));border:0;color:#fff}
.btn-danger{background:#1a0f17;border-color:#3a1130}
.btn-ghost{background:#0f1117;border-color:var(--line)}
.btn:disabled{opacity:.6;cursor:not-allowed}

/* ===== Dashboard grid — компактные карточки ===== */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:18px;
  justify-items:center;
}
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px;
  position:relative;
  overflow:visible;
  width:100%;
  max-width:420px;
}

/* Thumb */
.thumb{position:relative;width:100%;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:#0f1117;border:1px solid var(--line);margin-bottom:12px;cursor:zoom-in}
.thumb img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block}
.thumb .badge{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.55);border:1px solid var(--line);padding:5px 9px;border-radius:999px;font-size:12px}

/* Project page thumb */
.project-page .card .thumb{max-width:240px;margin:0 auto 12px}

/* Key-value layout */
.kv{display:grid;grid-template-columns:120px 1fr;gap:8px 10px;align-items:center}
.k{opacity:.75;font-size:13px}
.kv .v{min-width:0}
.v input,.v select{width:100%;background:#0f1117;border:1px solid var(--line);color:var(--fg);border-radius:10px;padding:10px 12px;min-height:40px}
.v textarea{width:100%;background:#0f1117;border:1px solid var(--line);color:var(--fg);border-radius:10px;padding:10px 12px;min-height:44px;max-height:140px;resize:vertical}

/* Inline pill */
.pill{display:inline-flex;align-items:center;gap:8px;background:#0f1117;border:1px solid var(--line);padding:8px 12px;border-radius:12px;max-width:100%}
.pill a{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inline{display:grid;grid-template-columns:1fr auto;gap:8px;width:100%}

/* Selects */
select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-color:#0f1117;border:1px solid var(--line);color:var(--fg);
  padding:10px 40px 10px 12px;border-radius:10px;min-height:40px;width:100%;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="%23a5a9b4"><path d="M7 10l5 5 5-5"/></svg>');
  background-repeat:no-repeat;background-position:right 12px center;background-size:14px;
}
select::-ms-expand{display:none}

/* Actions */
.actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}

/* Refs */
.ref-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.ref{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#0f1117;cursor:zoom-in}
.ref img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.ref .overlay{position:absolute;left:8px;bottom:8px;display:flex;gap:6px}
.ref .overlay .btn{padding:6px 8px;border-radius:10px}

/* File input */
.file-input{position:absolute;left:-9999px}
.file-label{display:inline-flex;align-items:center;gap:8px;background:#0f1117;border:1px solid var(--line);color:var(--fg);border-radius:12px;padding:10px 14px;cursor:pointer}
.file-name{color:var(--muted);margin:0 10px}
.type-select{min-width:110px}

/* Timeline */
.timeline{margin-top:16px;border-top:1px solid var(--line);padding-top:10px}
.t-row{display:grid;grid-template-columns:180px 1fr;gap:12px;position:relative;padding:8px 0}
.t-date{color:var(--muted)}
.t-dot{position:absolute;left:172px;top:17px;width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--g1),var(--g2))}
.t-text{line-height:1.45}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:999}
.lightbox.open{display:flex}
.lightbox img{max-width:90vw;max-height:90vh;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.4);}

/* Helpers */
.muted{color:var(--muted)}
.error{background:#311;border:1px solid #522;padding:10px;border-radius:10px;margin:8px 0}
.info{background:#132;border:1px solid #254;padding:10px;border-radius:10px;margin:8px 0}

@media (max-width:720px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
  .kv{grid-template-columns:1fr}
  .project-page .card .thumb{max-width:100%}
}

/* Project page layout */
.project-page .container{display:flex;justify-content:center}
.project-page #projectView{display:grid;gap:16px;justify-items:center;width:100%}
.project-page #projectView .card{width:100%;max-width:760px}
@media (max-width:820px){.project-page #projectView .card{max-width:100%}}
.project-page .card .thumb{max-width:240px;margin:0 auto 12px}

/* Link row fix */
.v.link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #0f1117;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  min-height: 40px;
  width: 100%;
}

.v.link-row a {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #a5c8ff;
  text-decoration: underline;
}

.v.link-row .btn {
  flex-shrink: 0;
  margin-left: 8px;
  background: transparent;
  border: 1px solid var(--line);
  padding: 6px 10px;
  border-radius: 10px;
  color: var(--fg);
  cursor: pointer;
  transition: background 0.2s ease;
}

.v.link-row .btn:hover {
  background: #171927;
}

/* --- Описание: в том же блоке, что и Ссылка --- */
.v > .inline {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0f1117;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  min-height: 44px;
  width: 100%;
}

.v > .inline .pill {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: transparent;
  border: none;
  padding: 0;
  color: var(--fg);
}

.v > .inline .btn {
  flex-shrink: 0;
  margin-left: 8px;
  background: transparent;
  border: 1px solid var(--line);
  padding: 6px 10px;
  border-radius: 10px;
  color: var(--fg);
  cursor: pointer;
  transition: background 0.2s ease;
}

.v > .inline .btn:hover {
  background: #171927;
}

/* --- Исправление обрезания первой буквы в описании --- */
.v > .inline .pill {
  padding-left: 5px; /* добавляем микропространство для первой буквы */
}

/* --- Плавное проявление обложки (fade-in) --- */
.thumb img {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.thumb img[src] {
  opacity: 1;
}