/* Self-hosted subsets — see public/fonts/NOTICE.md. No third-party font CDN. */
@font-face{font-family:Archivo;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/archivo-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,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:100 800;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,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:100 800;font-display:swap;src:url(/assets/fonts/jetbrains-mono-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

:root{
  --paper:#f2f0e9;
  --ink:#14140f;
  --muted:#57544c;
  --quiet:#8d8a80;
  --faint:#a29e93;
  --line:#d9d6cc;
  --field:#c9c5ba;
  --accent:#ff3b1f;
  --soft:#e9e6dd;
  --soft-2:#e3e0d6;
  --thumb:#e7e4da;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink)}
html{scroll-behavior:smooth}
body{min-height:100vh;font-family:Archivo,'Helvetica Neue',Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--accent)}
button,input,textarea,select{font-family:inherit;color:inherit}
button{cursor:pointer}
input:focus,textarea:focus{outline:none;border-color:var(--ink)!important}
::placeholder{color:#a8a49a}
::selection{background:var(--ink);color:var(--paper)}
[hidden]{display:none!important}

.vf-page{min-height:100vh;background:var(--paper);padding:0 40px 140px}
.vf-frame{max-width:1440px;margin:0 auto}
.vf-header{padding:34px 0 0}
.vf-topline{display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:2px solid var(--ink);padding-bottom:14px}
.vf-brand{font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.2;letter-spacing:.38em;font-weight:500;cursor:pointer;user-select:none;white-space:nowrap}
.vf-brand:hover{color:var(--ink)}
.vf-admin-slot{display:flex;align-items:center;gap:10px;min-height:28px}
.vf-mode-hint{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;color:var(--quiet);white-space:nowrap}
.vf-admin-badge{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;background:var(--accent);color:#fff;padding:6px 10px;white-space:nowrap}
.vf-exit-button{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;background:none;border:1px solid var(--ink);padding:6px 10px;cursor:pointer}
.vf-exit-button:hover{background:var(--ink);color:var(--paper)}

.vf-hero{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:40px;align-items:end;padding:46px 0 34px}
.vf-hero h1{margin:0;font-size:clamp(56px,9.5vw,150px);line-height:.86;letter-spacing:-.05em;font-weight:800;text-wrap:balance}
.vf-hero-side{display:flex;flex-direction:column;gap:14px;padding-bottom:12px}
.vf-hero-side p{font-size:17px;line-height:1.45;color:var(--muted);max-width:30ch;margin:0}
.vf-counter{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;color:var(--quiet)}

.vf-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-bottom:22px}
.vf-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vf-filter{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;padding:11px 17px;border-radius:999px;cursor:pointer;border:1.5px solid var(--ink);background:transparent;color:var(--ink);transition:transform .14s cubic-bezier(.2,.8,.2,1),box-shadow .14s ease,background .14s ease,color .14s ease}
.vf-filter:hover{transform:translateY(-3px);box-shadow:0 5px 0 var(--accent);color:var(--ink)}
.vf-filter:active{transform:translateY(0);box-shadow:none}
.vf-filter.is-active{background:var(--ink);color:var(--paper)}
.vf-toolbar-admin{margin-left:auto}
.vf-add-button{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;padding:12px 20px;border-radius:999px;cursor:pointer;border:0;background:var(--accent);color:#fff}
.vf-add-button:hover{transform:translateY(-2px);box-shadow:0 4px 0 var(--ink)}
.vf-add-button:active{transform:none;box-shadow:none}

.vf-table-head,.vf-project-row{display:grid;grid-template-columns:54px 116px minmax(0,2.6fr) 110px minmax(0,1.3fr) 250px;gap:24px}
.vf-table-head{align-items:center;padding:0 4px 10px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;color:var(--faint);border-bottom:2px solid var(--ink)}
.vf-table-head span:last-child{text-align:right}
.vf-project-row{align-items:center;padding:22px 4px;border-bottom:1px solid var(--line);position:relative;transition:background .16s ease,opacity .16s ease;animation:vfRowA .5s cubic-bezier(.2,.8,.2,1) both}
.vf-project-row:hover{background:var(--soft)}
.vf-project-row.is-hidden{opacity:.5}
.vf-project-row.is-dragging{opacity:.24}
.vf-project-row.drop-before{box-shadow:inset 0 4px 0 var(--accent)}
.vf-project-row[draggable="true"]{cursor:grab}
.vf-project-row[draggable="true"]:active{cursor:grabbing}
.vf-project-num{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--faint)}
.vf-thumb{width:116px;height:72px;position:relative;z-index:2;transform-style:preserve-3d;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease;border:1.5px solid var(--ink);background-color:var(--thumb);background-image:repeating-linear-gradient(135deg,#ddd9ce 0 8px,#e9e6dd 8px 16px);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:600;color:var(--quiet);overflow:hidden}
.vf-project-row.is-hidden .vf-thumb{border-color:var(--accent)}
.vf-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.vf-thumb:hover{color:var(--quiet)}
.vf-project-main{display:flex;flex-direction:column;gap:6px;min-width:0}
.vf-project-title-line{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.vf-project-name{font-size:32px;font-weight:600;letter-spacing:-.03em;line-height:1.05}
.vf-project-name:hover{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.vf-hidden-badge{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;color:#fff;background:var(--accent);padding:3px 7px}
.vf-project-main p{font-size:15px;line-height:1.45;color:var(--muted);text-wrap:pretty;margin:0}
.vf-project-type{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;white-space:nowrap}
/* Mirrors the mockup: TYPE and DOMAIN are separate grid cells on wide/mid, and
   collapse into one flex line on narrow. */
.vf-project-meta{display:contents}
.vf-project-domain{min-width:0}
.vf-project-domain a,.vf-project-domain span{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--quiet);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom:1px solid var(--field);display:inline-block;width:max-content;max-width:100%}
.vf-project-domain a:hover{color:var(--accent)}
.vf-project-links{display:flex;align-items:center;gap:10px;justify-content:flex-end;flex-wrap:wrap;min-width:0}
.vf-repo-button{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.1em;border:1.5px solid var(--ink);padding:9px 14px;white-space:nowrap;background:var(--paper);transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .16s ease,background .16s ease,color .16s ease,letter-spacing .16s ease}
.vf-repo-button:hover{background:var(--ink);color:var(--paper);transform:translate(-4px,-5px) rotate(-1.5deg);box-shadow:7px 8px 0 var(--accent);letter-spacing:.2em}
.vf-repo-button:active{transform:none;box-shadow:none}
.vf-row-admin{display:flex;gap:6px;font-family:'JetBrains Mono',monospace}
.vf-row-admin button{font-size:11px;letter-spacing:.1em;background:none;border:1px solid #b8b4a9;padding:8px 10px;cursor:pointer;white-space:nowrap}
.vf-row-admin button:first-child{background:var(--soft-2);border-color:var(--ink)}
.vf-row-admin button[data-action="delete"]{border-color:var(--accent);color:var(--accent)}
.vf-row-admin button:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.vf-row-admin button[data-action="delete"]:hover{background:var(--accent);border-color:var(--accent);color:#fff}

.vf-empty{padding:120px 0;display:flex;flex-direction:column;align-items:center;gap:22px}
.vf-empty>div{font-size:44px;font-weight:600;letter-spacing:-.03em;color:#b8b4a9}
.vf-footer{margin-top:90px;padding-top:18px;border-top:2px solid var(--ink);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;color:var(--faint)}

/* A <dialog> ships with a max-height that keeps it inside the viewport; overriding it
   with none let a tall editor run off the bottom of the screen with nothing to scroll.
   dvh so mobile browser chrome does not eat the last field. */
.vf-modal{padding:0;border:0;background:transparent;max-width:none;max-height:100vh;max-height:100dvh;overflow-y:auto;overscroll-behavior:contain}
.vf-modal::backdrop{background:#14140fcc}
.vf-modal-panel{width:calc(100vw - 48px);background:var(--paper);border:2px solid var(--ink);display:flex;flex-direction:column;animation:vfIn .2s ease both;color:var(--ink)}
.vf-login-panel{max-width:420px;padding:28px;gap:16px}
.vf-login-panel h2{font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1;margin:0}
.vf-login-panel>input{background:#fff;border:1.5px solid var(--field);padding:14px;font-size:15px;width:100%}
.vf-form-error{font-size:13px;color:var(--accent);min-height:0;margin:0}
.vf-form-error:empty{display:none}
.vf-modal-actions{display:flex;gap:8px;justify-content:flex-end}
.vf-button{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.12em;padding:12px 16px;cursor:pointer;border:1.5px solid var(--ink);background:none}
.vf-button--dark{background:var(--ink);color:var(--paper);border-color:var(--ink);padding-left:18px;padding-right:18px}
.vf-button--dark:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.vf-button--line:hover{background:var(--ink);color:var(--paper)}
.vf-button--accent{background:var(--accent);border-color:var(--accent);color:#fff;padding-left:22px;padding-right:22px}
.vf-button--accent:hover{background:var(--ink);border-color:var(--ink)}
.vf-modal-note{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;color:var(--faint)}

.vf-modal--editor{margin-top:40px;margin-bottom:40px;max-height:calc(100vh - 80px);max-height:calc(100dvh - 80px)}
.vf-editor-panel{max-width:620px;padding:30px;gap:20px}
.vf-editor-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.vf-editor-head h2{font-size:38px;font-weight:700;letter-spacing:-.035em;line-height:1;margin:0}
.vf-refresh-button{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;background:none;border:1.5px solid var(--field);padding:9px 12px;cursor:pointer;white-space:nowrap}
.vf-refresh-button:hover{border-color:var(--ink);background:var(--soft-2)}
.vf-field{display:flex;flex-direction:column;gap:8px}
.vf-field>span{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;color:var(--quiet);font-weight:400}
.vf-field>span b{font-weight:400}
.vf-field input,.vf-field textarea{background:#fff;border:1.5px solid var(--field);padding:13px;font-size:14px;width:100%}
.vf-field input#project-url,.vf-field input#repository-url{font-family:'JetBrains Mono',monospace}
.vf-field input#project-name{font-size:20px;font-weight:600;letter-spacing:-.02em}
.vf-field textarea{font-size:15px;line-height:1.5;resize:vertical;min-height:84px}
.vf-type-choices{display:flex;flex-wrap:wrap;gap:7px}
.vf-type-choice{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;padding:10px 13px;border-radius:999px;cursor:pointer;border:1.5px solid var(--ink);background:transparent;color:var(--ink)}
.vf-type-choice.is-active{background:var(--ink);color:var(--paper)}
.vf-type-choice:hover{box-shadow:0 3px 0 var(--accent);transform:translateY(-1px)}
.vf-preview-control{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;border:1.5px dashed var(--field)}
.vf-preview-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.vf-preview-copy strong{font-size:15px;font-weight:500}
.vf-preview-copy span{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px}
.vf-upload-hint{color:var(--quiet)}
/* There is no Ctrl+V on a touch keyboard — the ЗАГРУЗИТЬ button is the way in there. */
@media(pointer:coarse){.vf-upload-hint{display:none}}
.vf-preview-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.vf-upload-preview{width:52px;height:34px;border:1px solid var(--field);background:var(--thumb);overflow:hidden}
.vf-upload-preview img{width:100%;height:100%;object-fit:cover;display:block}
.vf-upload-button{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;background:var(--soft-2);border:1px solid var(--ink);padding:10px 13px;cursor:pointer}
.vf-upload-button:hover{background:var(--ink);color:var(--paper)}
.vf-preview-remove{width:30px;height:30px;border:1px solid var(--field);background:none;font-size:18px;line-height:1}
.vf-preview-remove:hover{border-color:var(--accent);color:var(--accent)}
.vf-visibility{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer}
.vf-visibility>span:first-child{font-size:15px}
.vf-visibility>input{position:absolute;opacity:0;pointer-events:none}
.vf-switch{width:52px;height:28px;border-radius:999px;border:1.5px solid var(--ink);background:transparent;position:relative;flex:0 0 auto;transition:background .15s ease}
.vf-switch i{position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:var(--ink);transition:left .15s ease,background .15s ease}
.vf-visibility>input:checked+.vf-switch{background:var(--ink)}
.vf-visibility>input:checked+.vf-switch i{left:28px;background:var(--paper)}
.vf-editor-actions{display:flex;gap:8px;justify-content:flex-end;padding-top:20px;border-top:2px solid var(--ink)}
.vf-editor-actions .vf-button{margin-top:0}
.vf-confirm-panel{max-width:460px;padding:28px;gap:16px;border-color:var(--accent)}
.vf-confirm-panel h2{font-size:28px;font-weight:600;letter-spacing:-.025em;line-height:1.15;margin:0}
.vf-confirm-panel p{font-size:15px;color:var(--muted);margin:0}
.vf-toast-region{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:60;pointer-events:none}
.vf-toast{background:var(--ink);color:var(--paper);font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.1em;padding:14px 20px;animation:vfIn .2s ease both;white-space:nowrap}
.vf-toast.is-error{background:var(--accent);color:#fff}

.vf-header--detail{padding-bottom:34px}
.vf-back{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em}
.vf-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,.8fr);border-bottom:1px solid var(--line)}
.vf-detail-preview{min-height:620px;border:1.5px solid var(--ink);background-color:var(--thumb);background-image:repeating-linear-gradient(135deg,#ddd9ce 0 12px,#e9e6dd 12px 24px);display:flex;align-items:center;justify-content:center;overflow:hidden}
.vf-detail-preview img{width:100%;height:100%;min-height:620px;object-fit:cover;display:block}
.vf-detail-preview>span{font-size:100px;font-weight:600;color:var(--quiet)}
.vf-detail-copy{padding:clamp(36px,5vw,76px);display:flex;flex-direction:column;justify-content:center}
.vf-detail-meta{display:flex;gap:24px;flex-wrap:wrap;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;color:var(--quiet)}
.vf-detail-copy h1{font-size:clamp(54px,7vw,108px);line-height:.88;letter-spacing:-.05em;margin:28px 0 24px;font-weight:800}
.vf-detail-copy>p{font-size:17px;line-height:1.5;color:var(--muted);margin:0 0 28px}
.vf-detail-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.vf-action-primary{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.1em;background:var(--accent);color:#fff;border:1.5px solid var(--accent);padding:11px 14px}
.vf-action-primary:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.vf-detail-info{margin-top:48px;padding-top:20px;border-top:2px solid var(--ink);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.vf-detail-info>div{display:flex;flex-direction:column;gap:5px;min-width:0}
.vf-detail-info span{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.16em;color:var(--faint)}
.vf-detail-info strong{font-size:13px;font-weight:500;overflow-wrap:anywhere}

@keyframes vfIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes vfRowA{from{opacity:0;transform:translateY(18px) scale(.985);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes vfRowB{from{opacity:0;transform:translateY(18px) scale(.985);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}}

@media(max-width:1279px) and (min-width:820px){
  .vf-table-head,.vf-project-row{grid-template-columns:32px 78px minmax(0,2.2fr) 84px minmax(0,1.2fr) 132px;gap:14px}
  .vf-project-row{padding:18px 2px}
  .vf-thumb{width:78px;height:52px}
  .vf-project-name{font-size:24px}
  .vf-project-links{gap:6px}
  .vf-repo-button{padding:8px 10px}
  .vf-row-admin{gap:4px}
  .vf-row-admin button{padding:7px 7px;font-size:10px}
}

@media(max-width:819px){
  .vf-page{padding:0 20px 100px}
  .vf-header{padding-top:28px}
  .vf-topline{gap:12px}
  .vf-brand{font-size:11px}
  .vf-mode-hint{font-size:9px}
  .vf-hero{grid-template-columns:1fr;gap:24px;padding:40px 0 30px}
  .vf-hero h1{font-size:clamp(56px,18vw,96px)}
  .vf-hero-side{padding:0;max-width:440px}
  .vf-hero-side p{font-size:15px}
  .vf-toolbar{align-items:flex-start}
  .vf-filters{gap:6px}
  .vf-filter{font-size:10px;padding:9px 12px}
  .vf-toolbar-admin{width:100%;margin-left:0}
  .vf-add-button{width:100%}
  .vf-table-head{display:none}
  .vf-project-row{grid-template-columns:minmax(0,1fr);gap:10px;align-items:start;padding:20px 0}
  .vf-project-num{order:0}
  .vf-thumb{order:1;width:100%;height:128px}
  .vf-project-main{order:2;margin-top:4px}
  .vf-project-name{font-size:26px}
  .vf-project-meta{display:flex;gap:14px;align-items:center;min-width:0;order:3;margin-top:4px}
  .vf-project-links{order:5;justify-content:flex-start;margin-top:5px}
  .vf-project-main p{font-size:14px}
  .vf-row-admin{width:100%;margin-top:3px;flex-wrap:wrap}
  .vf-footer{margin-top:64px;font-size:9px;line-height:1.5}
  .vf-login-panel,.vf-editor-panel,.vf-confirm-panel{width:calc(100vw - 32px);padding:24px 20px}
  .vf-modal--editor{margin-top:18px;margin-bottom:18px;max-height:calc(100vh - 36px);max-height:calc(100dvh - 36px)}
  .vf-editor-head{align-items:flex-start;flex-direction:column}
  .vf-editor-head h2{font-size:34px}
  .vf-refresh-button{align-self:flex-end;margin-top:-42px}
  .vf-preview-control{align-items:flex-start;flex-direction:column}
  .vf-preview-copy span{max-width:calc(100vw - 82px)}
  .vf-preview-actions{width:100%;justify-content:flex-end}
  .vf-detail{grid-template-columns:1fr}
  .vf-detail-preview{min-height:0;height:260px}
  .vf-detail-preview img{min-height:0;height:100%}
  .vf-detail-copy{padding:38px 0}
  .vf-detail-copy h1{font-size:58px}
}

@media(max-width:430px){
  .vf-topline{align-items:flex-start}
  .vf-admin-slot{flex-wrap:wrap;justify-content:flex-end}
  .vf-admin-badge,.vf-exit-button{font-size:9px;padding:5px 7px}
  .vf-footer{flex-direction:column}
  .vf-modal-actions,.vf-editor-actions{display:grid;grid-template-columns:1fr 1fr}
  .vf-button{width:100%}
}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}