feat: upgrade team admin with click-to-edit, Instagram validation, date picker, city autocomplete

- Team list: click card to open editor (remove pencil button), keep drag-to-reorder
- Instagram field: username-only input with @ prefix, async account validation via HEAD request
- Victory dates: date range picker replacing text input, auto-formats to DD.MM.YYYY / DD-DD.MM.YYYY
- Victory location: city autocomplete via Nominatim API with suggestions dropdown
- Links: real-time URL validation with error indicators on all link fields
- Save button blocked when any validation errors exist

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/app/admin/_components/FormField.tsx

@@ -1,5 +1,5 @@
 import { useRef, useEffect, useState } from "react";
-import { Plus, X, Upload, Loader2, Link, ImageIcon } from "lucide-react";
+import { Plus, X, Upload, Loader2, Link, ImageIcon, Calendar, AlertCircle, MapPin } from "lucide-react";
 import type { RichListItem, VictoryItem } from "@/types/content";
 
 interface InputFieldProps {
@@ -341,9 +341,10 @@ interface VictoryListFieldProps {
   items: RichListItem[];
   onChange: (items: RichListItem[]) => void;
   placeholder?: string;
+  onLinkValidate?: (key: string, error: string | null) => void;
 }
 
-export function VictoryListField({ label, items, onChange, placeholder }: VictoryListFieldProps) {
+export function VictoryListField({ label, items, onChange, placeholder, onLinkValidate }: VictoryListFieldProps) {
   const [draft, setDraft] = useState("");
   const [uploadingIndex, setUploadingIndex] = useState<number | null>(null);
 
@@ -425,18 +426,14 @@ export function VictoryListField({ label, items, onChange, placeholder }: Victor
                   <input type="file" accept="image/*" onChange={(e) => handleUpload(i, e)} className="hidden" />
                 </label>
               )}
-              <div className="flex items-center gap-1.5">
+              <ValidatedLinkField
-                <Link size={12} className="text-neutral-500" />
-                <input
-                  type="url"
                 value={item.link || ""}
-                  onChange={(e) => updateLink(i, e.target.value)}
+                onChange={(v) => updateLink(i, v)}
-                  placeholder="Ссылка..."
+                validationKey={`edu-${i}`}
-                  className="w-48 rounded-md border border-white/5 bg-neutral-800 px-2 py-1 text-xs text-white placeholder-neutral-600 outline-none focus:border-gold/50 transition-colors"
+                onValidate={onLinkValidate}
               />
             </div>
           </div>
-          </div>
         ))}
         <div className="flex items-center gap-2">
           <input
@@ -461,13 +458,223 @@ export function VictoryListField({ label, items, onChange, placeholder }: Victor
   );
 }
 
+// --- Date Range Picker ---
+// Parses Russian date formats: "22.02.2025", "22-23.02.2025", "22.02-01.03.2025"
+function parseDateRange(value: string): { start: string; end: string } {
+  if (!value) return { start: "", end: "" };
+
+  // "22-23.02.2025" → same month range
+  const sameMonth = value.match(/^(\d{1,2})-(\d{1,2})\.(\d{2})\.(\d{4})$/);
+  if (sameMonth) {
+    const [, d1, d2, m, y] = sameMonth;
+    return {
+      start: `${y}-${m}-${d1.padStart(2, "0")}`,
+      end: `${y}-${m}-${d2.padStart(2, "0")}`,
+    };
+  }
+
+  // "22.02-01.03.2025" → cross-month range
+  const crossMonth = value.match(/^(\d{1,2})\.(\d{2})-(\d{1,2})\.(\d{2})\.(\d{4})$/);
+  if (crossMonth) {
+    const [, d1, m1, d2, m2, y] = crossMonth;
+    return {
+      start: `${y}-${m1}-${d1.padStart(2, "0")}`,
+      end: `${y}-${m2}-${d2.padStart(2, "0")}`,
+    };
+  }
+
+  // "22.02.2025" → single date
+  const single = value.match(/^(\d{1,2})\.(\d{2})\.(\d{4})$/);
+  if (single) {
+    const [, d, m, y] = single;
+    const iso = `${y}-${m}-${d.padStart(2, "0")}`;
+    return { start: iso, end: "" };
+  }
+
+  return { start: "", end: "" };
+}
+
+function formatDateRange(start: string, end: string): string {
+  if (!start) return "";
+  const [sy, sm, sd] = start.split("-");
+  if (!end) return `${sd}.${sm}.${sy}`;
+  const [ey, em, ed] = end.split("-");
+  if (sm === em && sy === ey) return `${sd}-${ed}.${sm}.${sy}`;
+  return `${sd}.${sm}-${ed}.${em}.${ey}`;
+}
+
+interface DateRangeFieldProps {
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export function DateRangeField({ value, onChange }: DateRangeFieldProps) {
+  const { start, end } = parseDateRange(value);
+
+  function handleChange(s: string, e: string) {
+    onChange(formatDateRange(s, e));
+  }
+
+  return (
+    <div className="flex items-center gap-2">
+      <div className="relative flex-1">
+        <Calendar size={12} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-neutral-500 pointer-events-none" />
+        <input
+          type="date"
+          value={start}
+          onChange={(e) => handleChange(e.target.value, end)}
+          className="w-full rounded-lg border border-white/10 bg-neutral-800 pl-7 pr-2 py-2 text-sm text-white outline-none focus:border-gold transition-colors [color-scheme:dark]"
+        />
+      </div>
+      <span className="text-neutral-500 text-xs">—</span>
+      <div className="relative flex-1">
+        <Calendar size={12} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-neutral-500 pointer-events-none" />
+        <input
+          type="date"
+          value={end}
+          min={start}
+          onChange={(e) => handleChange(start, e.target.value)}
+          placeholder="(один день)"
+          className="w-full rounded-lg border border-white/10 bg-neutral-800 pl-7 pr-2 py-2 text-sm text-white outline-none focus:border-gold transition-colors [color-scheme:dark]"
+        />
+      </div>
+    </div>
+  );
+}
+
+// --- City Autocomplete Field ---
+interface CityFieldProps {
+  value: string;
+  onChange: (value: string) => void;
+  error?: string;
+  onSearch?: (query: string) => void;
+  suggestions?: string[];
+  onSelectSuggestion?: (value: string) => void;
+}
+
+export function CityField({ value, onChange, error, onSearch, suggestions, onSelectSuggestion }: CityFieldProps) {
+  const [focused, setFocused] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!focused) return;
+    function handle(e: MouseEvent) {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setFocused(false);
+      }
+    }
+    document.addEventListener("mousedown", handle);
+    return () => document.removeEventListener("mousedown", handle);
+  }, [focused]);
+
+  return (
+    <div ref={containerRef} className="relative flex-1">
+      <div className="relative">
+        <MapPin size={12} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-neutral-500 pointer-events-none" />
+        <input
+          type="text"
+          value={value}
+          onChange={(e) => {
+            onChange(e.target.value);
+            onSearch?.(e.target.value);
+          }}
+          onFocus={() => setFocused(true)}
+          placeholder="Город, страна"
+          className={`w-full rounded-lg border bg-neutral-800 pl-7 pr-3 py-2 text-sm text-white placeholder-neutral-600 outline-none transition-colors ${
+            error ? "border-red-500/50" : "border-white/10 focus:border-gold"
+          }`}
+        />
+        {error && <AlertCircle size={12} className="absolute right-2.5 top-1/2 -translate-y-1/2 text-red-400" />}
+      </div>
+      {error && <p className="mt-0.5 text-[10px] text-red-400">{error}</p>}
+      {focused && suggestions && suggestions.length > 0 && (
+        <div className="absolute z-50 mt-1 w-full rounded-lg border border-white/10 bg-neutral-800 shadow-xl overflow-hidden">
+          {suggestions.map((s) => (
+            <button
+              key={s}
+              type="button"
+              onMouseDown={(e) => e.preventDefault()}
+              onClick={() => {
+                onSelectSuggestion?.(s);
+                setFocused(false);
+              }}
+              className="w-full px-3 py-1.5 text-left text-sm text-white hover:bg-white/5 transition-colors"
+            >
+              {s}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// --- Link Field with Validation ---
+interface ValidatedLinkFieldProps {
+  value: string;
+  onChange: (value: string) => void;
+  onValidate?: (key: string, error: string | null) => void;
+  validationKey?: string;
+  placeholder?: string;
+}
+
+export function ValidatedLinkField({ value, onChange, onValidate, validationKey, placeholder }: ValidatedLinkFieldProps) {
+  const [error, setError] = useState<string | null>(null);
+
+  function validate(url: string) {
+    if (!url) {
+      setError(null);
+      onValidate?.(validationKey || "", null);
+      return;
+    }
+    try {
+      new URL(url);
+      setError(null);
+      onValidate?.(validationKey || "", null);
+    } catch {
+      setError("Некорректная ссылка");
+      onValidate?.(validationKey || "", "invalid");
+    }
+  }
+
+  return (
+    <div className="flex items-center gap-1.5 flex-1">
+      <Link size={12} className="text-neutral-500 shrink-0" />
+      <div className="relative flex-1">
+        <input
+          type="text"
+          value={value}
+          onChange={(e) => {
+            onChange(e.target.value);
+            validate(e.target.value);
+          }}
+          placeholder={placeholder || "Ссылка..."}
+          className={`w-full rounded-md border bg-neutral-800 px-2 py-1 text-xs text-white placeholder-neutral-600 outline-none transition-colors ${
+            error ? "border-red-500/50" : "border-white/5 focus:border-gold/50"
+          }`}
+        />
+        {error && (
+          <span className="absolute right-1.5 top-1/2 -translate-y-1/2">
+            <AlertCircle size={10} className="text-red-400" />
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}
+
 interface VictoryItemListFieldProps {
   label: string;
   items: VictoryItem[];
   onChange: (items: VictoryItem[]) => void;
+  cityErrors?: Record<number, string>;
+  citySuggestions?: { index: number; items: string[] } | null;
+  onCitySearch?: (index: number, query: string) => void;
+  onCitySelect?: (index: number, value: string) => void;
+  onLinkValidate?: (key: string, error: string | null) => void;
 }
 
-export function VictoryItemListField({ label, items, onChange }: VictoryItemListFieldProps) {
+export function VictoryItemListField({ label, items, onChange, cityErrors, citySuggestions, onCitySearch, onCitySelect, onLinkValidate }: VictoryItemListFieldProps) {
   const [uploadingIndex, setUploadingIndex] = useState<number | null>(null);
 
   function add() {
@@ -541,21 +748,21 @@ export function VictoryItemListField({ label, items, onChange }: VictoryItemList
               className="w-full rounded-lg border border-white/10 bg-neutral-800 px-3 py-2 text-sm text-white placeholder-neutral-600 outline-none focus:border-gold transition-colors"
             />
             <div className="flex gap-2">
-              <input
+              <CityField
-                type="text"
                 value={item.location || ""}
-                onChange={(e) => update(i, "location", e.target.value)}
+                onChange={(v) => update(i, "location", v)}
-                placeholder="Город, страна"
+                error={cityErrors?.[i]}
-                className="flex-1 rounded-lg border border-white/10 bg-neutral-800 px-3 py-2 text-sm text-white placeholder-neutral-600 outline-none focus:border-gold transition-colors"
+                onSearch={(q) => onCitySearch?.(i, q)}
+                suggestions={citySuggestions?.index === i ? citySuggestions.items : undefined}
+                onSelectSuggestion={(v) => onCitySelect?.(i, v)}
               />
-              <input
+              <div className="w-56 shrink-0">
-                type="text"
+                <DateRangeField
                   value={item.date || ""}
-                onChange={(e) => update(i, "date", e.target.value)}
+                  onChange={(v) => update(i, "date", v)}
-                placeholder="Дата (22-23.02.2025)"
-                className="w-40 rounded-lg border border-white/10 bg-neutral-800 px-3 py-2 text-sm text-white placeholder-neutral-600 outline-none focus:border-gold transition-colors"
                 />
               </div>
+            </div>
             <div className="flex items-center gap-2 pl-1">
               {item.image ? (
                 <div className="flex items-center gap-1.5 rounded-md bg-neutral-700/50 px-2 py-1 text-xs text-neutral-300">
@@ -572,18 +779,14 @@ export function VictoryItemListField({ label, items, onChange }: VictoryItemList
                   <input type="file" accept="image/*" onChange={(e) => handleUpload(i, e)} className="hidden" />
                 </label>
               )}
-              <div className="flex items-center gap-1.5">
+              <ValidatedLinkField
-                <Link size={12} className="text-neutral-500" />
-                <input
-                  type="url"
                 value={item.link || ""}
-                  onChange={(e) => update(i, "link", e.target.value)}
+                onChange={(v) => update(i, "link", v)}
-                  placeholder="Ссылка..."
+                validationKey={`victory-${i}`}
-                  className="w-48 rounded-md border border-white/5 bg-neutral-800 px-2 py-1 text-xs text-white placeholder-neutral-600 outline-none focus:border-gold/50 transition-colors"
+                onValidate={onLinkValidate}
               />
             </div>
           </div>
-          </div>
         ))}
         <button
           type="button"

src/app/admin/team/[id]/page.tsx

@@ -1,12 +1,19 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef, useCallback } from "react";
 import { useRouter, useParams } from "next/navigation";
 import Image from "next/image";
-import { Save, Loader2, Check, ArrowLeft, Upload } from "lucide-react";
+import { Save, Loader2, Check, ArrowLeft, Upload, AlertCircle } from "lucide-react";
 import { InputField, TextareaField, ListField, VictoryListField, VictoryItemListField } from "../../_components/FormField";
 import type { RichListItem, VictoryItem } from "@/types/content";
 
+function extractUsername(value: string): string {
+  if (!value) return "";
+  // Strip full URL → username
+  const cleaned = value.replace(/^https?:\/\/(www\.)?instagram\.com\//, "").replace(/\/$/, "").replace(/^@/, "");
+  return cleaned;
+}
+
 interface MemberForm {
   name: string;
   role: string;
@@ -38,34 +45,112 @@ export default function TeamMemberEditorPage() {
   const [saved, setSaved] = useState(false);
   const [uploading, setUploading] = useState(false);
 
+  // Instagram validation
+  const [igStatus, setIgStatus] = useState<"idle" | "checking" | "valid" | "invalid">("idle");
+  const igTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const validateInstagram = useCallback((username: string) => {
+    if (igTimerRef.current) clearTimeout(igTimerRef.current);
+    if (!username) { setIgStatus("idle"); return; }
+    setIgStatus("checking");
+    igTimerRef.current = setTimeout(async () => {
+      try {
+        const res = await fetch(`/api/admin/validate-instagram?username=${encodeURIComponent(username)}`);
+        const result = await res.json();
+        setIgStatus(result.valid ? "valid" : "invalid");
+      } catch {
+        setIgStatus("idle");
+      }
+    }, 800);
+  }, []);
+
+  // Link validation for bio
+  const [linkErrors, setLinkErrors] = useState<Record<string, string>>({});
+
+  function validateUrl(url: string): boolean {
+    if (!url) return true;
+    try { new URL(url); return true; } catch { return false; }
+  }
+
+  // City validation for victories
+  const [cityErrors, setCityErrors] = useState<Record<number, string>>({});
+  const [citySuggestions, setCitySuggestions] = useState<{ index: number; items: string[] } | null>(null);
+  const cityTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const searchCity = useCallback((index: number, query: string) => {
+    if (cityTimerRef.current) clearTimeout(cityTimerRef.current);
+    if (!query || query.length < 2) { setCitySuggestions(null); return; }
+    cityTimerRef.current = setTimeout(async () => {
+      try {
+        const res = await fetch(
+          `https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(query)}&format=json&addressdetails=1&limit=5&accept-language=ru`,
+          { headers: { "User-Agent": "BlackheartAdmin/1.0" } }
+        );
+        const results = await res.json();
+        const cities = results
+          .filter((r: Record<string, unknown>) => {
+            const type = r.type as string;
+            const cls = r.class as string;
+            return cls === "place" || type === "city" || type === "town" || type === "village" || type === "administrative";
+          })
+          .map((r: Record<string, unknown>) => {
+            const addr = r.address as Record<string, string> | undefined;
+            const city = addr?.city || addr?.town || addr?.village || (r.name as string);
+            const country = addr?.country || "";
+            return country ? `${city}, ${country}` : city;
+          })
+          .filter((v: string, i: number, a: string[]) => a.indexOf(v) === i);
+        setCitySuggestions(cities.length > 0 ? { index, items: cities } : null);
+        if (cities.length === 0 && query.length >= 3) {
+          setCityErrors((prev) => ({ ...prev, [index]: "Город не найден" }));
+        } else {
+          setCityErrors((prev) => { const n = { ...prev }; delete n[index]; return n; });
+        }
+      } catch {
+        setCitySuggestions(null);
+      }
+    }, 500);
+  }, []);
+
   useEffect(() => {
     if (isNew) return;
     fetch(`/api/admin/team/${id}`)
       .then((r) => r.json())
-      .then((member) =>
+      .then((member) => {
+        const username = extractUsername(member.instagram || "");
         setData({
           name: member.name,
           role: member.role,
           image: member.image,
-          instagram: member.instagram || "",
+          instagram: username,
           description: member.description || "",
           experience: member.experience || [],
           victories: member.victories || [],
           education: member.education || [],
+        });
+        if (username) setIgStatus("valid"); // existing data is trusted
       })
-      )
       .finally(() => setLoading(false));
   }, [id, isNew]);
 
+  const hasErrors = igStatus === "invalid" || Object.keys(linkErrors).length > 0 || Object.keys(cityErrors).length > 0;
+
   async function handleSave() {
+    if (hasErrors) return;
     setSaving(true);
     setSaved(false);
 
+    // Build instagram as full URL for storage if username is provided
+    const payload = {
+      ...data,
+      instagram: data.instagram ? `https://instagram.com/${data.instagram}` : "",
+    };
+
     if (isNew) {
       const res = await fetch("/api/admin/team", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(data),
+        body: JSON.stringify(payload),
       });
       if (res.ok) {
         router.push("/admin/team");
@@ -74,7 +159,7 @@ export default function TeamMemberEditorPage() {
       const res = await fetch(`/api/admin/team/${id}`, {
         method: "PUT",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(data),
+        body: JSON.stringify(payload),
       });
       if (res.ok) {
         setSaved(true);
@@ -134,7 +219,7 @@ export default function TeamMemberEditorPage() {
         </div>
         <button
           onClick={handleSave}
-          disabled={saving || !data.name || !data.role}
+          disabled={saving || !data.name || !data.role || hasErrors || igStatus === "checking"}
           className="flex items-center gap-2 rounded-lg bg-gold px-4 py-2.5 text-sm font-medium text-black transition-opacity hover:opacity-90 disabled:opacity-50"
         >
           {saving ? (
@@ -189,13 +274,40 @@ export default function TeamMemberEditorPage() {
             value={data.role}
             onChange={(v) => setData({ ...data, role: v })}
           />
-          <InputField
+          <div>
-            label="Instagram"
+            <label className="block text-sm text-neutral-400 mb-1.5">Instagram</label>
+            <div className="relative">
+              <span className="absolute left-4 top-1/2 -translate-y-1/2 text-neutral-500 text-sm select-none">@</span>
+              <input
+                type="text"
                 value={data.instagram}
-            onChange={(v) => setData({ ...data, instagram: v })}
+                onChange={(e) => {
-            type="url"
+                  const username = extractUsername(e.target.value);
-            placeholder="https://instagram.com/..."
+                  setData({ ...data, instagram: username });
+                  validateInstagram(username);
+                }}
+                placeholder="username"
+                className={`w-full rounded-lg border bg-neutral-800 pl-8 pr-10 py-2.5 text-white placeholder-neutral-500 outline-none transition-colors ${
+                  igStatus === "invalid"
+                    ? "border-red-500 focus:border-red-500"
+                    : igStatus === "valid"
+                    ? "border-green-500/50 focus:border-green-500"
+                    : "border-white/10 focus:border-gold"
+                }`}
               />
+              <span className="absolute right-3 top-1/2 -translate-y-1/2">
+                {igStatus === "checking" && <Loader2 size={14} className="animate-spin text-neutral-400" />}
+                {igStatus === "valid" && <Check size={14} className="text-green-400" />}
+                {igStatus === "invalid" && <AlertCircle size={14} className="text-red-400" />}
+              </span>
+            </div>
+            {igStatus === "invalid" && (
+              <p className="mt-1 text-xs text-red-400">Аккаунт не найден</p>
+            )}
+            {data.instagram && igStatus !== "invalid" && (
+              <p className="mt-1 text-xs text-neutral-500">instagram.com/{data.instagram}</p>
+            )}
+          </div>
           <TextareaField
             label="Описание"
             value={data.description}
@@ -216,12 +328,33 @@ export default function TeamMemberEditorPage() {
                 label="Достижения"
                 items={data.victories}
                 onChange={(items) => setData({ ...data, victories: items })}
+                cityErrors={cityErrors}
+                citySuggestions={citySuggestions}
+                onCitySearch={searchCity}
+                onCitySelect={(i, v) => {
+                  const updated = data.victories.map((item, idx) => idx === i ? { ...item, location: v } : item);
+                  setData({ ...data, victories: updated });
+                  setCitySuggestions(null);
+                  setCityErrors((prev) => { const n = { ...prev }; delete n[i]; return n; });
+                }}
+                onLinkValidate={(key, error) => {
+                  setLinkErrors((prev) => {
+                    if (error) return { ...prev, [key]: error };
+                    const n = { ...prev }; delete n[key]; return n;
+                  });
+                }}
               />
               <VictoryListField
                 label="Образование"
                 items={data.education}
                 onChange={(items) => setData({ ...data, education: items })}
                 placeholder="Например: Сертификат IPSF"
+                onLinkValidate={(key, error) => {
+                  setLinkErrors((prev) => {
+                    if (error) return { ...prev, [key]: error };
+                    const n = { ...prev }; delete n[key]; return n;
+                  });
+                }}
               />
             </div>
           </div>

src/app/admin/team/page.tsx

@@ -9,7 +9,6 @@ import {
   Plus,
   Trash2,
   GripVertical,
-  Pencil,
   Check,
 } from "lucide-react";
 import type { TeamMember } from "@/types/content";
@@ -80,16 +79,23 @@ export default function TeamEditorPage() {
       const x = e.clientX;
       const y = e.clientY;
       const pendingIndex = index;
+      let moved = false;
 
       function onMove(ev: MouseEvent) {
         const dx = ev.clientX - x;
         const dy = ev.clientY - y;
         if (Math.abs(dx) > 8 || Math.abs(dy) > 8) {
+          moved = true;
           cleanup();
           startDrag(ev.clientX, ev.clientY, pendingIndex);
         }
       }
-      function onUp() { cleanup(); }
+      function onUp() {
+        cleanup();
+        if (!moved) {
+          window.location.href = `/admin/team/${members[pendingIndex].id}`;
+        }
+      }
       function cleanup() {
         window.removeEventListener("mousemove", onMove);
         window.removeEventListener("mouseup", onUp);
@@ -97,7 +103,7 @@ export default function TeamEditorPage() {
       window.addEventListener("mousemove", onMove);
       window.addEventListener("mouseup", onUp);
     },
-    [startDrag]
+    [startDrag, members]
   );
 
   useEffect(() => {
@@ -177,7 +183,7 @@ export default function TeamEditorPage() {
           key={member.id}
           ref={(el) => { itemRefs.current[i] = el; }}
           onMouseDown={(e) => handleCardMouseDown(e, i)}
-          className="flex items-center gap-4 rounded-lg border border-white/10 bg-neutral-900/50 p-3 mb-2 hover:border-white/25 hover:bg-neutral-800/50 transition-colors"
+          className="flex items-center gap-4 rounded-lg border border-white/10 bg-neutral-900/50 p-3 mb-2 hover:border-white/25 hover:bg-neutral-800/50 transition-colors cursor-pointer"
         >
           <div
             className="cursor-grab active:cursor-grabbing text-neutral-500 hover:text-white transition-colors select-none"
@@ -192,15 +198,10 @@ export default function TeamEditorPage() {
             <p className="font-medium text-white truncate">{member.name}</p>
             <p className="text-sm text-neutral-400 truncate">{member.role}</p>
           </div>
-          <div className="flex items-center gap-1">
+          <button onClick={(e) => { e.stopPropagation(); deleteMember(member.id); }} className="rounded p-2 text-neutral-400 hover:text-red-400 transition-colors">
-            <Link href={`/admin/team/${member.id}`} className="rounded p-2 text-neutral-400 hover:text-white transition-colors">
-              <Pencil size={16} />
-            </Link>
-            <button onClick={() => deleteMember(member.id)} className="rounded p-2 text-neutral-400 hover:text-red-400 transition-colors">
             <Trash2 size={16} />
           </button>
         </div>
-        </div>
       ));
     }
 
@@ -237,7 +238,7 @@ export default function TeamEditorPage() {
           key={member.id}
           ref={(el) => { itemRefs.current[i] = el; }}
           onMouseDown={(e) => handleCardMouseDown(e, i)}
-          className="flex items-center gap-4 rounded-lg border border-white/10 bg-neutral-900/50 p-3 mb-2 hover:border-white/25 hover:bg-neutral-800/50 transition-colors"
+          className="flex items-center gap-4 rounded-lg border border-white/10 bg-neutral-900/50 p-3 mb-2 hover:border-white/25 hover:bg-neutral-800/50 transition-colors cursor-pointer"
         >
           <div
             className="cursor-grab active:cursor-grabbing text-neutral-500 hover:text-white transition-colors select-none"
@@ -252,15 +253,10 @@ export default function TeamEditorPage() {
             <p className="font-medium text-white truncate">{member.name}</p>
             <p className="text-sm text-neutral-400 truncate">{member.role}</p>
           </div>
-          <div className="flex items-center gap-1">
+          <button onClick={(e) => { e.stopPropagation(); deleteMember(member.id); }} className="rounded p-2 text-neutral-400 hover:text-red-400 transition-colors">
-            <Link href={`/admin/team/${member.id}`} className="rounded p-2 text-neutral-400 hover:text-white transition-colors">
-              <Pencil size={16} />
-            </Link>
-            <button onClick={() => deleteMember(member.id)} className="rounded p-2 text-neutral-400 hover:text-red-400 transition-colors">
             <Trash2 size={16} />
           </button>
         </div>
-        </div>
       );
       visualIndex++;
     }

src/app/api/admin/validate-instagram/route.ts

@@ -0,0 +1,27 @@
+import { NextRequest, NextResponse } from "next/server";
+
+export async function GET(request: NextRequest) {
+  const username = request.nextUrl.searchParams.get("username")?.trim();
+  if (!username) {
+    return NextResponse.json({ valid: false, error: "No username" });
+  }
+
+  try {
+    const res = await fetch(`https://www.instagram.com/${username}/`, {
+      method: "HEAD",
+      redirect: "follow",
+      headers: {
+        "User-Agent":
+          "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
+      },
+      signal: AbortSignal.timeout(5000),
+    });
+
+    // Instagram returns 200 for existing profiles, 404 for non-existing
+    const valid = res.ok;
+    return NextResponse.json({ valid });
+  } catch {
+    // Network error or timeout — don't block the user
+    return NextResponse.json({ valid: true, uncertain: true });
+  }
+}

src/components/sections/team/TeamProfile.tsx

@@ -20,7 +20,7 @@ export function TeamProfile({ member, onBack }: TeamProfileProps) {
       className="w-full"
       style={{ animation: "team-info-in 0.6s cubic-bezier(0.16, 1, 0.3, 1)" }}
     >
-      {/* Back button — above card */}
+      {/* Back button */}
       <button
         onClick={onBack}
         className="mb-6 inline-flex items-center gap-1.5 text-sm text-white/40 transition-colors hover:text-gold-light cursor-pointer"
@@ -29,31 +29,34 @@ export function TeamProfile({ member, onBack }: TeamProfileProps) {
         Назад
       </button>
 
-      {/* Two-column layout */}
+      {/* Magazine editorial layout */}
-      <div className="flex flex-col gap-8 sm:flex-row sm:items-start">
+      <div className="relative mx-auto max-w-4xl flex flex-col sm:flex-row sm:items-start">
-        {/* Photo with name overlay */}
+        {/* Photo — left column, sticky */}
-        <div className="relative shrink-0 w-full sm:w-[380px] aspect-[3/4] overflow-hidden rounded-xl border border-white/[0.06]">
+        <div className="relative shrink-0 w-full sm:w-[340px] lg:w-[380px] sm:sticky sm:top-8">
+          <div className="relative aspect-[3/4] overflow-hidden rounded-2xl border border-white/[0.06]">
             <Image
               src={member.image}
               alt={member.name}
               fill
-            sizes="(min-width: 640px) 380px, 100vw"
+              sizes="(min-width: 1024px) 380px, (min-width: 640px) 340px, 100vw"
               className="object-cover"
             />
-          {/* Gradient overlay for text readability */}
+            {/* Top gradient for name */}
-          <div className="absolute inset-0 bg-gradient-to-b from-black/60 via-transparent to-transparent" />
+            <div className="absolute inset-0 bg-gradient-to-b from-black/70 via-transparent to-transparent" />
+            {/* Bottom gradient for mobile bio peek */}
+            <div className="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent sm:hidden" />
 
-          {/* Name + role + instagram overlay */}
+            {/* Name + role overlay at top */}
-          <div className="absolute top-0 left-0 right-0 p-6">
+            <div className="absolute top-0 left-0 right-0 p-6 sm:p-8">
               <h3
                 className="text-3xl sm:text-4xl font-bold text-white leading-tight"
-              style={{ textShadow: "0 2px 20px rgba(0,0,0,0.5)" }}
+                style={{ textShadow: "0 2px 24px rgba(0,0,0,0.6)" }}
               >
                 {member.name}
               </h3>
               <p
-              className="mt-1 text-sm font-medium text-gold-light"
+                className="mt-1.5 text-sm sm:text-base font-medium text-gold-light"
-              style={{ textShadow: "0 1px 10px rgba(0,0,0,0.5)" }}
+                style={{ textShadow: "0 1px 12px rgba(0,0,0,0.5)" }}
               >
                 {member.role}
               </p>
@@ -71,16 +74,19 @@ export function TeamProfile({ member, onBack }: TeamProfileProps) {
               )}
             </div>
           </div>
+        </div>
 
-        {/* Right column — bio content */}
+        {/* Bio panel — overlaps photo edge on desktop */}
-        <div className="flex-1 min-w-0">
+        <div className="relative sm:-ml-12 sm:mt-8 mt-0 flex-1 min-w-0 z-10">
-          {/* Victories as structured card grid */}
+          <div className="rounded-2xl border border-white/[0.08] bg-black/60 backdrop-blur-xl p-5 sm:p-6 shadow-2xl shadow-black/40">
+            {/* Victories */}
             {hasVictories && (
               <div>
-              <span className="inline-block rounded-full border border-white/15 px-4 py-1.5 text-sm font-medium text-white">
+                <span className="inline-flex items-center gap-1.5 rounded-full border border-gold/20 bg-gold/5 px-4 py-1.5 text-sm font-medium text-gold">
-                Достижения:
+                  <Trophy size={14} />
+                  Достижения
                 </span>
-              <div className="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-3">
+                <div className="mt-4 flex flex-col sm:flex-row sm:flex-wrap gap-2.5">
                   {member.victories!.map((item, i) => (
                     <VictoryCard key={i} victory={item} onImageClick={setLightbox} />
                   ))}
@@ -88,14 +94,14 @@ export function TeamProfile({ member, onBack }: TeamProfileProps) {
               </div>
             )}
 
-          {/* Education as card grid */}
+            {/* Education */}
             {hasEducation && (
               <div className={hasVictories ? "mt-8" : ""}>
-              <span className="inline-block rounded-full border border-white/15 px-4 py-1.5 text-sm font-medium text-white">
+                <span className="inline-flex items-center gap-1.5 rounded-full border border-gold/20 bg-gold/5 px-4 py-1.5 text-sm font-medium text-gold">
-                <GraduationCap size={14} className="inline -mt-0.5 mr-1.5" />
+                  <GraduationCap size={14} />
-                Образование:
+                  Образование
                 </span>
-              <div className="mt-4 grid grid-cols-2 lg:grid-cols-3 gap-3">
+                <div className="mt-4 space-y-2">
                   {member.education!.map((item, i) => (
                     <RichCard key={i} item={item} onImageClick={setLightbox} />
                   ))}
@@ -103,22 +109,20 @@ export function TeamProfile({ member, onBack }: TeamProfileProps) {
               </div>
             )}
 
-          {/* Experience as text list */}
+            {/* Experience */}
             {hasExperience && (
               <div className={hasVictories || hasEducation ? "mt-8" : ""}>
-              <div className="flex items-center gap-2 text-gold mb-3">
+                <span className="inline-flex items-center gap-1.5 rounded-full border border-gold/20 bg-gold/5 px-4 py-1.5 text-sm font-medium text-gold">
                   <Trophy size={15} />
-                <span className="text-xs font-semibold uppercase tracking-wider">
                   Опыт
                 </span>
-              </div>
+                <ul className="mt-4 space-y-2.5">
-              <ul className="space-y-2">
                   {member.experience!.map((item, i) => (
                     <li
                       key={i}
-                    className="flex items-start gap-2 text-sm text-white/60"
+                      className="flex items-start gap-2.5 text-sm text-white/60"
                     >
-                    <span className="mt-1.5 h-1 w-1 shrink-0 rounded-full bg-gold/50" />
+                      <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-gold/40" />
                       {item}
                     </li>
                   ))}
@@ -128,10 +132,18 @@ export function TeamProfile({ member, onBack }: TeamProfileProps) {
 
             {/* Description */}
             {member.description && (
-            <p className={`text-sm leading-relaxed text-white/50 ${hasBio ? "mt-8 border-t border-white/[0.06] pt-6" : ""}`}>
+              <p className={`text-sm leading-relaxed text-white/45 ${hasBio ? "mt-8 border-t border-white/[0.06] pt-6" : ""}`}>
                 {member.description}
               </p>
             )}
+
+            {/* Empty state */}
+            {!hasBio && !member.description && (
+              <p className="text-sm text-white/30 italic">
+                Информация скоро появится
+              </p>
+            )}
+          </div>
         </div>
       </div>
 
@@ -168,57 +180,26 @@ function VictoryCard({ victory, onImageClick }: { victory: VictoryItem; onImageC
 
   if (hasImage) {
     return (
-      <div className="group rounded-lg border border-white/[0.06] overflow-hidden">
+      <div className="group w-full sm:w-44 shrink-0 rounded-xl border border-white/[0.08] overflow-hidden">
         <button
           onClick={() => onImageClick(victory.image!)}
-          className="relative w-full aspect-[3/4] overflow-hidden cursor-pointer"
+          className="relative w-full aspect-square overflow-hidden cursor-pointer"
         >
           <Image
             src={victory.image!}
             alt={victory.competition}
             fill
-            sizes="(min-width: 640px) 200px, 45vw"
+            sizes="176px"
             className="object-cover transition-transform group-hover:scale-105"
           />
-          {/* Gradient overlay at bottom */}
+          <div className="absolute bottom-0 left-0 right-0 bg-black/80 backdrop-blur-sm p-2.5 space-y-0.5">
-          <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />
-          {/* Text overlay at bottom */}
-          <div className="absolute bottom-0 left-0 right-0 p-3 space-y-0.5">
             {victory.place && (
-              <p className="text-lg font-bold text-gold" style={{ textShadow: "0 1px 8px rgba(0,0,0,0.5)" }}>{victory.place}</p>
+              <p className="text-sm font-bold text-gold">{victory.place}</p>
             )}
             {victory.category && (
-              <p className="text-xs font-medium uppercase tracking-wider text-white/90" style={{ textShadow: "0 1px 6px rgba(0,0,0,0.5)" }}>{victory.category}</p>
+              <p className="text-[10px] font-semibold uppercase tracking-wider text-white">{victory.category}</p>
-            )}
-            <p className="text-sm text-white/70" style={{ textShadow: "0 1px 6px rgba(0,0,0,0.5)" }}>{victory.competition}</p>
-            {(victory.location || victory.date) && (
-              <div className="flex flex-wrap items-center gap-x-3 gap-y-0.5 pt-0.5">
-                {victory.location && (
-                  <span className="inline-flex items-center gap-1 text-xs text-white/50">
-                    <MapPin size={10} />
-                    {victory.location}
-                  </span>
-                )}
-                {victory.date && (
-                  <span className="inline-flex items-center gap-1 text-xs text-white/50">
-                    <Calendar size={10} />
-                    {victory.date}
-                  </span>
-                )}
-              </div>
-            )}
-            {hasLink && (
-              <a
-                href={victory.link}
-                target="_blank"
-                rel="noopener noreferrer"
-                onClick={(e) => e.stopPropagation()}
-                className="mt-1 inline-flex items-center gap-1 text-xs text-gold/80 hover:text-gold transition-colors"
-              >
-                <ExternalLink size={11} />
-                Подробнее
-              </a>
             )}
+            <p className="text-xs text-white/80">{victory.competition}</p>
           </div>
         </button>
       </div>
@@ -226,8 +207,8 @@ function VictoryCard({ victory, onImageClick }: { victory: VictoryItem; onImageC
   }
 
   return (
-    <div className="group rounded-lg border border-white/[0.06] overflow-hidden">
+    <div className="group w-full sm:w-56 shrink-0 rounded-xl border border-white/[0.08] overflow-hidden bg-white/[0.03]">
-      <div className="p-3 space-y-1">
+      <div className="p-2.5 space-y-0.5">
         {victory.place && (
           <p className="text-lg font-bold text-gold">{victory.place}</p>
         )}
@@ -273,41 +254,39 @@ function RichCard({ item, onImageClick }: { item: RichListItem; onImageClick: (s
 
   if (hasImage) {
     return (
-      <div className="group rounded-lg border border-white/[0.06] overflow-hidden">
+      <div className="group flex rounded-xl border border-white/[0.08] overflow-hidden bg-white/[0.03]">
         <button
           onClick={() => onImageClick(item.image!)}
-          className="relative w-full aspect-[3/4] overflow-hidden cursor-pointer"
+          className="relative w-16 shrink-0 overflow-hidden cursor-pointer"
         >
           <Image
             src={item.image!}
             alt={item.text}
             fill
-            sizes="(min-width: 1024px) 200px, (min-width: 640px) 160px, 45vw"
+            sizes="64px"
             className="object-cover transition-transform group-hover:scale-105"
           />
-          <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />
+        </button>
-          <div className="absolute bottom-0 left-0 right-0 p-3">
+        <div className="flex-1 min-w-0 p-2.5">
-            <p className="text-sm text-white/80" style={{ textShadow: "0 1px 6px rgba(0,0,0,0.5)" }}>{item.text}</p>
+          <p className="text-xs text-white/70">{item.text}</p>
           {hasLink && (
             <a
               href={item.link}
               target="_blank"
               rel="noopener noreferrer"
-                onClick={(e) => e.stopPropagation()}
+              className="mt-1 inline-flex items-center gap-1 text-xs text-gold/70 hover:text-gold transition-colors"
-                className="mt-1 inline-flex items-center gap-1 text-xs text-gold/80 hover:text-gold transition-colors"
             >
               <ExternalLink size={11} />
               Подробнее
             </a>
           )}
         </div>
-        </button>
       </div>
     );
   }
 
   return (
-    <div className="group rounded-lg border border-white/[0.06] overflow-hidden">
+    <div className="group rounded-xl border border-white/[0.08] overflow-hidden bg-white/[0.03]">
       <div className="p-3">
         <p className="text-sm text-white/60">{item.text}</p>
         {hasLink && (