diff --git a/README.md b/README.md
index 9ffdf49..8b13789 100644
--- a/README.md
+++ b/README.md
@@ -1 +1 @@
-# Html.box
\ No newline at end of file
+
diff --git a/app.js b/app.js
new file mode 100644
index 0000000..195349a
--- /dev/null
+++ b/app.js
@@ -0,0 +1,1323 @@
+const DB_NAME = 'mono-super-platform';
+const DB_VERSION = 1;
+const DEV_CODE = 'dev:1234';
+const STORES = ['meta', 'users', 'profiles', 'chats', 'messages', 'posts', 'comments', 'likes', 'logs'];
+
+const q = (sel, parent = document) => parent.querySelector(sel);
+const qa = (sel, parent = document) => Array.from(parent.querySelectorAll(sel));
+
+const escapeHTML = (value = '') =>
+  value
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+
+const sanitizeInput = (value = '') => {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(`<body>${value}</body>`, 'text/html');
+  return (doc.body.textContent || '').trim();
+};
+
+class DataLayer {
+  constructor() {
+    this.db = null;
+    this.eventTarget = new EventTarget();
+  }
+
+  async open() {
+    if (this.db) return this.db;
+    this.db = await new Promise((resolve, reject) => {
+      const req = indexedDB.open(DB_NAME, DB_VERSION);
+      req.onupgradeneeded = (event) => {
+        const db = req.result;
+        STORES.forEach((store) => {
+          if (!db.objectStoreNames.contains(store)) {
+            switch (store) {
+              case 'meta':
+                db.createObjectStore('meta', { keyPath: 'key' });
+                break;
+              case 'users':
+                db.createObjectStore('users', { keyPath: 'id' });
+                break;
+              case 'profiles':
+                db.createObjectStore('profiles', { keyPath: 'id' });
+                break;
+              case 'chats': {
+                const s = db.createObjectStore('chats', { keyPath: 'id' });
+                s.createIndex('by_participant', 'participants', { multiEntry: true });
+                break;
+              }
+              case 'messages': {
+                const s = db.createObjectStore('messages', { keyPath: 'id' });
+                s.createIndex('by_chat', 'chatId');
+                s.createIndex('by_time', 'time');
+                break;
+              }
+              case 'posts': {
+                const s = db.createObjectStore('posts', { keyPath: 'id' });
+                s.createIndex('by_author', 'authorProfileId');
+                s.createIndex('by_type', 'type');
+                break;
+              }
+              case 'comments': {
+                const s = db.createObjectStore('comments', { keyPath: 'id' });
+                s.createIndex('by_post', 'postId');
+                break;
+              }
+              case 'likes': {
+                const s = db.createObjectStore('likes', { keyPath: 'id' });
+                s.createIndex('by_post', 'postId');
+                s.createIndex('by_profile', 'profileId');
+                break;
+              }
+              case 'logs': {
+                const s = db.createObjectStore('logs', { keyPath: 'id', autoIncrement: true });
+                s.createIndex('by_time', 'time');
+                break;
+              }
+              default:
+                db.createObjectStore(store, { keyPath: 'id' });
+            }
+          }
+        });
+      };
+      req.onsuccess = () => resolve(req.result);
+      req.onerror = () => reject(req.error);
+    });
+
+    this.db.onversionchange = () => {
+      this.db.close();
+      alert('Версия базы данных обновлена. Перезагрузите страницу.');
+    };
+
+    const seeded = await this.get('meta', 'seeded');
+    if (!seeded) {
+      await this.seed();
+    }
+    return this.db;
+  }
+
+  async seed() {
+    const response = await fetch('seed-db.json');
+    const data = await response.json();
+    const tx = this.db.transaction(STORES, 'readwrite');
+    await Promise.all(
+      STORES.map((store) => {
+        if (store === 'meta') return Promise.resolve();
+        const objectStore = tx.objectStore(store);
+        const items = data[store] || [];
+        return Promise.all(
+          items.map(
+            (item) =>
+              new Promise((resolve, reject) => {
+                const req = objectStore.put(item);
+                req.onsuccess = () => resolve();
+                req.onerror = () => reject(req.error);
+              })
+          )
+        );
+      })
+    );
+    tx.objectStore('meta').put({ key: 'seeded', value: true, time: Date.now() });
+    await new Promise((resolve, reject) => {
+      tx.oncomplete = () => resolve();
+      tx.onerror = () => reject(tx.error);
+      tx.onabort = () => reject(tx.error);
+    });
+    await this.recordLog('seed', { info: 'Seed database loaded' });
+  }
+
+  async transaction(storeNames, mode = 'readonly') {
+    const db = await this.open();
+    return db.transaction(storeNames, mode);
+  }
+
+  async get(store, key) {
+    const tx = await this.transaction([store], 'readonly');
+    return new Promise((resolve, reject) => {
+      const req = tx.objectStore(store).get(key);
+      req.onsuccess = () => resolve(req.result);
+      req.onerror = () => reject(req.error);
+    });
+  }
+
+  async getAll(store, indexName, query) {
+    const tx = await this.transaction([store], 'readonly');
+    const objectStore = tx.objectStore(store);
+    return new Promise((resolve, reject) => {
+      const req = indexName
+        ? objectStore.index(indexName).getAll(query)
+        : objectStore.getAll();
+      req.onsuccess = () => resolve(req.result || []);
+      req.onerror = () => reject(req.error);
+    });
+  }
+
+  async put(store, value) {
+    const tx = await this.transaction([store], 'readwrite');
+    await new Promise((resolve, reject) => {
+      const req = tx.objectStore(store).put(value);
+      req.onsuccess = () => resolve(req.result);
+      req.onerror = () => reject(req.error);
+    });
+    await new Promise((resolve, reject) => {
+      tx.oncomplete = () => resolve();
+      tx.onerror = () => reject(tx.error);
+      tx.onabort = () => reject(tx.error);
+    });
+    await this.recordLog('put', { store, value });
+    this.dispatch(`${store}:change`);
+    return value;
+  }
+
+  async bulkPut(store, values) {
+    const tx = await this.transaction([store], 'readwrite');
+    const storeRef = tx.objectStore(store);
+    await Promise.all(
+      values.map(
+        (value) =>
+          new Promise((resolve, reject) => {
+            const req = storeRef.put(value);
+            req.onsuccess = () => resolve(req.result);
+            req.onerror = () => reject(req.error);
+          })
+      )
+    );
+    await new Promise((resolve, reject) => {
+      tx.oncomplete = () => resolve();
+      tx.onerror = () => reject(tx.error);
+      tx.onabort = () => reject(tx.error);
+    });
+    await this.recordLog('bulkPut', { store, count: values.length });
+    this.dispatch(`${store}:change`);
+    return values;
+  }
+
+  async delete(store, key) {
+    const tx = await this.transaction([store], 'readwrite');
+    await new Promise((resolve, reject) => {
+      const req = tx.objectStore(store).delete(key);
+      req.onsuccess = () => resolve();
+      req.onerror = () => reject(req.error);
+    });
+    await new Promise((resolve, reject) => {
+      tx.oncomplete = () => resolve();
+      tx.onerror = () => reject(tx.error);
+      tx.onabort = () => reject(tx.error);
+    });
+    await this.recordLog('delete', { store, key });
+    this.dispatch(`${store}:change`);
+  }
+
+  async clearAll() {
+    const tx = await this.transaction(STORES, 'readwrite');
+    await Promise.all(
+      STORES.map(
+        (store) =>
+          new Promise((resolve, reject) => {
+            const req = tx.objectStore(store).clear();
+            req.onsuccess = () => resolve();
+            req.onerror = () => reject(req.error);
+          })
+      )
+    );
+    await new Promise((resolve, reject) => {
+      tx.oncomplete = () => resolve();
+      tx.onerror = () => reject(tx.error);
+      tx.onabort = () => reject(tx.error);
+    });
+    await this.recordLog('reset', { info: 'database cleared' });
+    this.dispatch('db:reset');
+  }
+
+  async recordLog(action, payload) {
+    const entry = {
+      action,
+      payload,
+      time: Date.now(),
+    };
+    const tx = await this.transaction(['logs'], 'readwrite');
+    await new Promise((resolve, reject) => {
+      const req = tx.objectStore('logs').add(entry);
+      req.onsuccess = () => resolve();
+      req.onerror = () => reject(req.error);
+    });
+    this.dispatch('logs:change');
+  }
+
+  dispatch(name) {
+    this.eventTarget.dispatchEvent(new CustomEvent(name));
+  }
+
+  subscribe(name, handler) {
+    this.eventTarget.addEventListener(name, handler);
+    return () => this.eventTarget.removeEventListener(name, handler);
+  }
+}
+
+const dataLayer = new DataLayer();
+
+const state = {
+  activeScreen: 'chats',
+  activeProfileId: null,
+  activeChatId: null,
+  replyingTo: null,
+  editingMessageId: null,
+  searchCategory: 'posts',
+  searchQuery: '',
+  reduceMotion: window.matchMedia('(prefers-reduced-motion: reduce)').matches,
+};
+
+const UI = {
+  topTitle: q('#topTitle'),
+  backButton: q('#backButton'),
+  topAction: q('#topAction'),
+  main: q('#main'),
+  screens: {
+    chats: q('#screen-chats'),
+    chat: q('#screen-chat'),
+    feed: q('#screen-feed'),
+    video: q('#screen-video'),
+    photo: q('#screen-photo'),
+    search: q('#screen-search'),
+    profile: q('#screen-profile'),
+  },
+  nav: q('.bottom-nav'),
+  dev: {
+    panel: q('#devPanel'),
+    backdrop: q('#devBackdrop'),
+    close: q('#closeDev'),
+    tabs: q('.dev-panel__tabs'),
+    tabButtons: qa('.dev-panel__tabs button'),
+    content: q('#devContent'),
+    tableSelect: q('#devTable'),
+    filterInput: q('#devFilter'),
+    refresh: q('#devRefresh'),
+    data: q('#devData'),
+    editor: q('#devEditor'),
+    importBtn: q('#devImport'),
+    exportBtn: q('#devExport'),
+    applyBtn: q('#devApply'),
+    logs: q('#devLogs'),
+    resetBtn: q('#devReset'),
+    reduceMotion: q('#reduceMotion'),
+  },
+};
+
+const formatTime = (ts) => {
+  const date = new Date(ts);
+  return date.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' });
+};
+
+const formatDate = (ts) => {
+  const date = new Date(ts);
+  return date.toLocaleDateString('ru-RU', { month: 'short', day: 'numeric' });
+};
+
+const generateId = (prefix) => `${prefix}-${Math.random().toString(36).slice(2, 9)}`;
+
+async function loadState() {
+  const profiles = await dataLayer.getAll('profiles');
+  const activeProfile = profiles.find((p) => p.active) || profiles[0];
+  state.activeProfileId = activeProfile?.id;
+  renderNav();
+  await renderScreen(state.activeScreen);
+  UI.dev.tableSelect.innerHTML = STORES.map((store) => `<option value="${store}">${store}</option>`).join('');
+  await refreshDevData();
+  updateReduceMotionToggle();
+}
+
+function renderNav() {
+  qa('.nav-item').forEach((btn) => {
+    const isActive = btn.dataset.target === state.activeScreen;
+    btn.setAttribute('aria-current', isActive ? 'page' : 'false');
+  });
+}
+
+async function renderScreen(screen) {
+  Object.entries(UI.screens).forEach(([name, el]) => {
+    const visible = name === screen;
+    el.setAttribute('aria-hidden', String(!visible));
+  });
+  switch (screen) {
+    case 'chats':
+      UI.topTitle.textContent = 'Чаты';
+      UI.backButton.dataset.visible = 'false';
+      UI.topAction.dataset.visible = 'false';
+      await renderChats();
+      break;
+    case 'chat':
+      UI.topTitle.textContent = getActiveChatTitle();
+      UI.backButton.dataset.visible = 'true';
+      UI.topAction.dataset.visible = 'false';
+      await renderChat();
+      break;
+    case 'feed':
+      UI.topTitle.textContent = 'Лента';
+      UI.backButton.dataset.visible = 'false';
+      UI.topAction.dataset.visible = 'true';
+      UI.topAction.onclick = () => openCreatePost();
+      await renderFeed();
+      break;
+    case 'video':
+      UI.topTitle.textContent = 'Видео';
+      UI.backButton.dataset.visible = 'false';
+      UI.topAction.dataset.visible = 'false';
+      await renderVideo();
+      break;
+    case 'photo':
+      UI.topTitle.textContent = 'Фото';
+      UI.backButton.dataset.visible = 'false';
+      UI.topAction.dataset.visible = 'false';
+      await renderPhoto();
+      break;
+    case 'search':
+      UI.topTitle.textContent = 'Поиск';
+      UI.backButton.dataset.visible = 'false';
+      UI.topAction.dataset.visible = 'false';
+      await renderSearch();
+      break;
+    case 'profile':
+      UI.topTitle.textContent = 'Профиль';
+      UI.backButton.dataset.visible = 'false';
+      UI.topAction.dataset.visible = 'false';
+      await renderProfile();
+      break;
+    default:
+      break;
+  }
+}
+
+async function renderChats() {
+  const container = UI.screens.chats;
+  const profileId = state.activeProfileId;
+  const chats = await dataLayer.getAll('chats');
+  const messages = await dataLayer.getAll('messages');
+  const filtered = chats
+    .filter((chat) => chat.participants.includes(profileId) || chat.type === 'channel')
+    .map((chat) => {
+      const lastMessage = messages.find((m) => m.id === chat.lastMessageId) || null;
+      return { ...chat, lastMessage };
+    })
+    .sort((a, b) => {
+      if (a.pinned && !b.pinned) return -1;
+      if (!a.pinned && b.pinned) return 1;
+      return (b.lastMessage?.time || 0) - (a.lastMessage?.time || 0);
+    });
+
+  container.innerHTML = filtered
+    .map((chat) => {
+      const initials = escapeHTML(chat.title.slice(0, 2).toUpperCase());
+      const snippet = chat.lastMessage?.deleted
+        ? 'Удалено'
+        : escapeHTML(chat.lastMessage?.text || 'Нет сообщений');
+      const timeLabel = chat.lastMessage ? formatTime(chat.lastMessage.time) : '';
+      return `
+        <article class="card chat-card" data-chat-id="${chat.id}" tabindex="0">
+          <div class="avatar">${initials}</div>
+          <div>
+            <div class="text-strong">${escapeHTML(chat.title)}</div>
+            <div class="text-muted" aria-label="Последнее сообщение">${snippet}</div>
+          </div>
+          <div class="chat-meta">
+            <time class="text-muted">${timeLabel}</time>
+            ${chat.pinned ? '<svg><use href="icons.svg#pin"></use></svg>' : ''}
+          </div>
+          <div class="chat-actions" hidden>
+            <button data-action="archive" aria-label="Архивировать чат">Архив</button>
+            <button data-action="pin" aria-label="Закрепить чат">Пин</button>
+            <button data-action="delete" aria-label="Удалить чат">Del</button>
+          </div>
+        </article>
+      `;
+    })
+    .join('');
+
+  qa('.chat-card', container).forEach((card) => {
+    setupSwipe(card);
+  });
+}
+
+function setupSwipe(card) {
+  let startX = 0;
+  let currentX = 0;
+  let isSwiping = false;
+  const actions = card.querySelector('.chat-actions');
+  card.style.touchAction = 'pan-y';
+  card.addEventListener('pointerdown', (event) => {
+    startX = event.clientX;
+    currentX = startX;
+    isSwiping = true;
+    card.setPointerCapture(event.pointerId);
+    actions.hidden = false;
+    actions.style.opacity = '0';
+  });
+  card.addEventListener('pointermove', (event) => {
+    if (!isSwiping) return;
+    currentX = event.clientX;
+    const delta = currentX - startX;
+    card.style.transform = `translateX(${delta}px)`;
+    actions.style.opacity = `${Math.min(Math.abs(delta) / 100, 1)}`;
+  });
+  card.addEventListener('pointerup', (event) => {
+    if (!isSwiping) return;
+    const delta = currentX - startX;
+    card.releasePointerCapture(event.pointerId);
+    isSwiping = false;
+    card.style.transform = '';
+    actions.style.opacity = '';
+    actions.hidden = true;
+    if (delta > 90) {
+      handleChatQuickAction(card.dataset.chatId, 'pin');
+    } else if (delta < -90) {
+      handleChatQuickAction(card.dataset.chatId, 'delete');
+    }
+  });
+  card.addEventListener('pointercancel', () => {
+    if (!isSwiping) return;
+    isSwiping = false;
+    card.style.transform = '';
+    actions.style.opacity = '';
+    actions.hidden = true;
+  });
+  card.addEventListener('click', () => openChat(card.dataset.chatId));
+  card.addEventListener('keydown', (event) => {
+    if (event.key === 'Enter') openChat(card.dataset.chatId);
+  });
+  actions.addEventListener('click', (event) => {
+    const action = event.target?.dataset?.action;
+    if (!action) return;
+    event.stopPropagation();
+    handleChatQuickAction(card.dataset.chatId, action);
+  });
+}
+
+function getActiveChatTitle() {
+  const card = qa('.chat-card').find((el) => el.dataset.chatId === state.activeChatId);
+  if (card) {
+    return card.querySelector('.text-strong')?.textContent || 'Чат';
+  }
+  return 'Чат';
+}
+
+async function renderChat() {
+  const container = UI.screens.chat;
+  const chatId = state.activeChatId;
+  if (!chatId) return;
+  const chat = await dataLayer.get('chats', chatId);
+  if (!chat) return;
+  const messages = await dataLayer.getAll('messages', 'by_chat', chatId);
+  messages.sort((a, b) => a.time - b.time);
+  const messageMap = new Map(messages.map((msg) => [msg.id, msg]));
+
+  container.innerHTML = `
+    <section class="message-list" id="messageList">
+      ${messages
+        .map((message) => {
+          const own = message.senderProfileId === state.activeProfileId;
+          const content = message.deleted
+            ? '<span class="text-muted">Сообщение удалено</span>'
+            : escapeHTML(message.text);
+          const reply = message.replyTo ? messageMap.get(message.replyTo) : null;
+          return `
+            <article class="message ${own ? 'message--own' : ''}" data-message-id="${message.id}" tabindex="0">
+              ${reply ? `<div class="message__reply">↳ ${escapeHTML(reply.text.slice(0, 60))}</div>` : ''}
+              <div>${content}</div>
+              <div class="message__meta">${formatTime(message.time)}${
+                message.edited ? ' · ред.' : ''
+              }</div>
+              <button class="icon-button message__menu" aria-label="Опции сообщения">
+                <svg><use href="icons.svg#more"></use></svg>
+              </button>
+            </article>
+          `;
+        })
+        .join('')}
+    </section>
+  `;
+
+  let composer = q('.composer');
+  if (!composer) {
+    composer = document.createElement('form');
+    composer.className = 'composer';
+    composer.innerHTML = `
+      <div class="composer__reply" hidden>
+        <span id="composerReply"></span>
+        <button type="button" id="cancelReply">×</button>
+      </div>
+      <textarea id="composerInput" rows="1" placeholder="Сообщение" aria-label="Поле ввода сообщения"></textarea>
+      <button type="submit" aria-label="Отправить">Send</button>
+    `;
+    document.body.appendChild(composer);
+    const textarea = q('#composerInput', composer);
+    const cancelReply = q('#cancelReply', composer);
+    textarea.addEventListener('input', autoResizeTextarea);
+    composer.addEventListener('submit', onSendMessage);
+    cancelReply.addEventListener('click', () => {
+      state.replyingTo = null;
+      state.editingMessageId = null;
+      q('.composer__reply', composer).hidden = true;
+      textarea.value = '';
+      autoResizeTextarea({ target: textarea });
+    });
+  }
+  composer.dataset.chatId = chatId;
+  const replyBadge = q('.composer__reply', composer);
+  replyBadge.hidden = !state.replyingTo && !state.editingMessageId;
+  if (state.replyingTo) {
+    q('#composerReply', composer).textContent = `Ответ на: ${state.replyingTo.text.slice(0, 40)}`;
+  } else if (state.editingMessageId) {
+    const editing = messages.find((m) => m.id === state.editingMessageId);
+    if (editing) {
+      q('#composerReply', composer).textContent = `Редактирование: ${editing.text.slice(0, 40)}`;
+      const textarea = q('#composerInput', composer);
+      textarea.value = editing.text;
+      autoResizeTextarea({ target: textarea });
+    }
+  } else {
+    const textarea = q('#composerInput', composer);
+    textarea.value = '';
+    autoResizeTextarea({ target: textarea });
+  }
+
+  qa('.message', container).forEach((messageEl) => {
+    const messageId = messageEl.dataset.messageId;
+    const menuBtn = messageEl.querySelector('.message__menu');
+    menuBtn.addEventListener('click', (event) => {
+      event.stopPropagation();
+      openMessageMenu(messageId, messageEl);
+    });
+  });
+
+  container.scrollTop = container.scrollHeight;
+}
+
+function autoResizeTextarea(event) {
+  const el = event.target;
+  el.style.height = 'auto';
+  el.style.height = `${Math.min(el.scrollHeight, 44 * 3)}px`;
+}
+
+async function onSendMessage(event) {
+  event.preventDefault();
+  const textarea = q('#composerInput');
+  const raw = sanitizeInput(textarea.value);
+  if (!raw) return;
+  const chatId = event.currentTarget.dataset.chatId;
+  if (state.editingMessageId) {
+    const existing = await dataLayer.get('messages', state.editingMessageId);
+    if (existing) {
+      await dataLayer.put('messages', {
+        ...existing,
+        text: raw,
+        edited: true,
+      });
+    }
+  } else {
+    const message = {
+      id: generateId('msg'),
+      chatId,
+      senderProfileId: state.activeProfileId,
+      text: raw,
+      attachments: [],
+      replyTo: state.replyingTo?.id || null,
+      time: Date.now(),
+      edited: false,
+      deleted: false,
+    };
+    await dataLayer.put('messages', message);
+    await dataLayer.put('chats', {
+      ...(await dataLayer.get('chats', chatId)),
+      lastMessageId: message.id,
+    });
+  }
+  state.replyingTo = null;
+  state.editingMessageId = null;
+  textarea.value = '';
+  autoResizeTextarea({ target: textarea });
+  await renderChat();
+  await renderChats();
+}
+
+async function openChat(chatId) {
+  state.activeChatId = chatId;
+  state.activeScreen = 'chat';
+  renderNav();
+  await renderScreen('chat');
+}
+
+async function handleChatQuickAction(chatId, action) {
+  const chat = await dataLayer.get('chats', chatId);
+  if (!chat) return;
+  if (action === 'delete') {
+    await dataLayer.delete('chats', chatId);
+    const messages = await dataLayer.getAll('messages', 'by_chat', chatId);
+    await Promise.all(messages.map((msg) => dataLayer.delete('messages', msg.id)));
+  }
+  if (action === 'pin') {
+    await dataLayer.put('chats', { ...chat, pinned: !chat.pinned });
+  }
+  if (action === 'archive') {
+    await dataLayer.put('chats', { ...chat, archived: !chat.archived });
+  }
+  renderChats();
+}
+
+function openMessageMenu(messageId, anchorEl) {
+  let sheet = q('#messageSheet');
+  if (!sheet) {
+    sheet = document.createElement('div');
+    sheet.id = 'messageSheet';
+    sheet.className = 'bottom-sheet';
+    sheet.innerHTML = `
+      <div class="context-menu">
+        <button data-action="reply"><svg><use href="icons.svg#reply"></use></svg> Ответить</button>
+        <button data-action="edit"><svg><use href="icons.svg#edit"></use></svg> Редактировать</button>
+        <button data-action="copy"><svg><use href="icons.svg#copy"></use></svg> Копировать</button>
+        <button data-action="delete"><svg><use href="icons.svg#delete"></use></svg> Удалить</button>
+      </div>
+    `;
+    document.body.appendChild(sheet);
+  }
+  sheet.classList.add('active');
+  sheet.dataset.messageId = messageId;
+  sheet.onclick = async (event) => {
+    const action = event.target?.closest('button')?.dataset?.action;
+    if (!action) return;
+    const message = await dataLayer.get('messages', sheet.dataset.messageId);
+    if (!message) return;
+    const composer = q('.composer');
+    switch (action) {
+      case 'reply':
+        state.replyingTo = message;
+        state.editingMessageId = null;
+        if (composer) {
+          q('.composer__reply', composer).hidden = false;
+          q('#composerReply', composer).textContent = `Ответ на: ${message.text.slice(0, 40)}`;
+        }
+        break;
+      case 'edit':
+        state.editingMessageId = message.id;
+        state.replyingTo = null;
+        if (composer) {
+          q('.composer__reply', composer).hidden = false;
+          q('#composerReply', composer).textContent = `Редактирование: ${message.text.slice(0, 40)}`;
+          const textarea = q('#composerInput', composer);
+          textarea.value = message.text;
+          autoResizeTextarea({ target: textarea });
+        }
+        break;
+      case 'copy':
+        try {
+          await navigator.clipboard.writeText(message.text);
+        } catch (error) {
+          console.warn('Clipboard unavailable', error);
+        }
+        break;
+      case 'delete':
+        await dataLayer.put('messages', { ...message, deleted: true });
+        break;
+      default:
+        break;
+    }
+    sheet.classList.remove('active');
+    renderChat();
+  };
+  document.addEventListener(
+    'click',
+    function closeSheet(event) {
+      if (!sheet.contains(event.target)) {
+        sheet.classList.remove('active');
+        document.removeEventListener('click', closeSheet);
+      }
+    },
+    { once: true }
+  );
+}
+
+async function renderFeed() {
+  const container = UI.screens.feed;
+  const posts = await dataLayer.getAll('posts');
+  const profiles = await dataLayer.getAll('profiles');
+  const likes = await dataLayer.getAll('likes');
+  const comments = await dataLayer.getAll('comments');
+  posts.sort((a, b) => b.time - a.time);
+  container.innerHTML = posts
+    .map((post) => {
+      const author = profiles.find((p) => p.id === post.authorProfileId);
+      const liked = likes.some((like) => like.postId === post.id && like.profileId === state.activeProfileId);
+      const counters = {
+        likes: likes.filter((l) => l.postId === post.id).length,
+        comments: comments.filter((c) => c.postId === post.id).length,
+      };
+      return `
+        <article class="card feed-card" data-post-id="${post.id}">
+          <header class="feed-card__header">
+            <div class="avatar">${escapeHTML(author?.handle?.slice(0, 2) || 'PR')}</div>
+            <div>
+              <div>${escapeHTML(author?.handle || 'profile')}</div>
+              <time class="text-muted">${formatDate(post.time)}</time>
+            </div>
+          </header>
+          <div>${escapeHTML(post.content)}</div>
+          ${post.media?.[0] ? `<div class="media-thumb">${escapeHTML(post.media[0].src)}</div>` : ''}
+          <footer class="feed-card__actions">
+            <button data-action="like" aria-pressed="${liked}">
+              <svg><use href="icons.svg#like"></use></svg>${counters.likes}
+            </button>
+            <button data-action="repost">
+              <svg><use href="icons.svg#repost"></use></svg>
+            </button>
+            <button data-action="comment">
+              <svg><use href="icons.svg#comment"></use></svg>${counters.comments}
+            </button>
+            <button data-action="share">
+              <svg><use href="icons.svg#share"></use></svg>
+            </button>
+          </footer>
+        </article>
+      `;
+    })
+    .join('');
+  container.onclick = onFeedAction;
+}
+
+async function onFeedAction(event) {
+  const btn = event.target.closest('button[data-action]');
+  if (!btn) return;
+  const card = event.target.closest('.feed-card');
+  if (!card) return;
+  const postId = card.dataset.postId;
+  const action = btn.dataset.action;
+  if (action === 'like') {
+    const likes = await dataLayer.getAll('likes');
+    const existing = likes.find((l) => l.postId === postId && l.profileId === state.activeProfileId);
+    if (existing) {
+      await dataLayer.delete('likes', existing.id);
+    } else {
+      await dataLayer.put('likes', {
+        id: generateId('like'),
+        postId,
+        profileId: state.activeProfileId,
+        time: Date.now(),
+      });
+    }
+    renderFeed();
+  }
+  if (action === 'comment') {
+    openCommentSheet(postId);
+  }
+  if (action === 'share') {
+    alert('Поделиться доступно в полной версии.');
+  }
+  if (action === 'repost') {
+    alert('Репост сохранён локально.');
+  }
+}
+
+async function openCommentSheet(postId) {
+  let sheet = q('#commentSheet');
+  if (!sheet) {
+    sheet = document.createElement('form');
+    sheet.id = 'commentSheet';
+    sheet.className = 'bottom-sheet';
+    sheet.innerHTML = `
+      <div class="context-menu">
+        <label>Комментарий<textarea name="comment" rows="3" required></textarea></label>
+        <button type="submit">Сохранить</button>
+      </div>
+    `;
+    document.body.appendChild(sheet);
+    sheet.addEventListener('submit', async (event) => {
+      event.preventDefault();
+      const text = sanitizeInput(new FormData(sheet).get('comment'));
+      if (!text) return;
+      await dataLayer.put('comments', {
+        id: generateId('cm'),
+        postId: sheet.dataset.postId,
+        authorProfileId: state.activeProfileId,
+        text,
+        time: Date.now(),
+      });
+      sheet.classList.remove('active');
+      renderFeed();
+    });
+  }
+  sheet.dataset.postId = postId;
+  sheet.classList.add('active');
+  document.addEventListener(
+    'click',
+    function closeSheet(event) {
+      if (!sheet.contains(event.target)) {
+        sheet.classList.remove('active');
+        document.removeEventListener('click', closeSheet);
+      }
+    },
+    { once: true }
+  );
+}
+
+async function openCreatePost() {
+  let sheet = q('#postSheet');
+  if (!sheet) {
+    sheet = document.createElement('form');
+    sheet.id = 'postSheet';
+    sheet.className = 'bottom-sheet active';
+    sheet.innerHTML = `
+      <div class="context-menu">
+        <label>Тип
+          <select name="type">
+            <option value="text">Текст</option>
+            <option value="photo">Фото</option>
+            <option value="video">Видео</option>
+          </select>
+        </label>
+        <label>Контент<textarea name="content" rows="4" required></textarea></label>
+        <label>Медиа ID<input name="media" placeholder="mock-id"></label>
+        <button type="submit">Создать</button>
+      </div>
+    `;
+    document.body.appendChild(sheet);
+    sheet.addEventListener('submit', async (event) => {
+      event.preventDefault();
+      const formData = new FormData(sheet);
+      const type = formData.get('type');
+      const content = sanitizeInput(formData.get('content'));
+      const mediaId = sanitizeInput(formData.get('media'));
+      if (!content) return;
+      const post = {
+        id: generateId('post'),
+        authorProfileId: state.activeProfileId,
+        type,
+        content,
+        media: mediaId ? [{ kind: type, src: mediaId }] : [],
+        time: Date.now(),
+        likesCount: 0,
+      };
+      await dataLayer.put('posts', post);
+      sheet.classList.remove('active');
+      renderFeed();
+    });
+  } else {
+    sheet.classList.add('active');
+  }
+  document.addEventListener(
+    'click',
+    function closeSheet(event) {
+      if (!sheet.contains(event.target)) {
+        sheet.classList.remove('active');
+        document.removeEventListener('click', closeSheet);
+      }
+    },
+    { once: true }
+  );
+}
+
+async function renderVideo() {
+  const container = UI.screens.video;
+  const posts = await dataLayer.getAll('posts', 'by_type', 'video');
+  posts.sort((a, b) => b.time - a.time);
+  container.innerHTML = posts
+    .map(
+      (post) => `
+      <article class="card" data-video-id="${post.id}">
+        <div class="media-thumb">${escapeHTML(post.media?.[0]?.src || 'video')}</div>
+        <div>${escapeHTML(post.content)}</div>
+        <button data-action="play">Смотреть</button>
+      </article>
+    `
+    )
+    .join('');
+  container.onclick = (event) => {
+    const card = event.target.closest('[data-video-id]');
+    if (!card) return;
+    if (event.target.dataset.action === 'play') {
+      openVideoViewer(card.dataset.videoId);
+    }
+  };
+}
+
+async function openVideoViewer(postId) {
+  let viewer = q('#videoViewer');
+  if (!viewer) {
+    viewer = document.createElement('section');
+    viewer.id = 'videoViewer';
+    viewer.className = 'video-viewer';
+    viewer.innerHTML = `
+      <div class="video-player">
+        <span id="videoMock"></span>
+      </div>
+      <div class="video-controls">
+        <button id="videoClose">Закрыть</button>
+        <button id="videoLike">Лайк</button>
+      </div>
+      <div class="video-comments" id="videoComments"></div>
+    `;
+    document.body.appendChild(viewer);
+    q('#videoClose', viewer).addEventListener('click', () => viewer.classList.remove('active'));
+  }
+  const post = await dataLayer.get('posts', postId);
+  const comments = (await dataLayer.getAll('comments', 'by_post', postId)) || [];
+  const likes = await dataLayer.getAll('likes');
+  q('#videoMock', viewer).textContent = post.media?.[0]?.src || 'Видео';
+  q('#videoComments', viewer).innerHTML = comments
+    .map((comment) => `<p>${escapeHTML(comment.text)}<br><small>${formatTime(comment.time)}</small></p>`)
+    .join('');
+  const likeBtn = q('#videoLike', viewer);
+  const liked = likes.some((l) => l.postId === postId && l.profileId === state.activeProfileId);
+  likeBtn.textContent = liked ? 'Убрать лайк' : 'Лайк';
+  likeBtn.onclick = async () => {
+    const freshLikes = await dataLayer.getAll('likes');
+    const existing = freshLikes.find((l) => l.postId === postId && l.profileId === state.activeProfileId);
+    if (existing) {
+      await dataLayer.delete('likes', existing.id);
+    } else {
+      await dataLayer.put('likes', {
+        id: generateId('like'),
+        postId,
+        profileId: state.activeProfileId,
+        time: Date.now(),
+      });
+    }
+    const updatedLikes = await dataLayer.getAll('likes');
+    const likedNow = updatedLikes.some((l) => l.postId === postId && l.profileId === state.activeProfileId);
+    likeBtn.textContent = likedNow ? 'Убрать лайк' : 'Лайк';
+    renderFeed();
+  };
+  viewer.classList.add('active');
+}
+
+async function renderPhoto() {
+  const container = UI.screens.photo;
+  const posts = await dataLayer.getAll('posts', 'by_type', 'photo');
+  posts.sort((a, b) => b.time - a.time);
+  container.innerHTML = `
+    <div class="photo-grid">
+      ${posts
+        .map((post) => `
+          <button class="photo-grid__item" data-post-id="${post.id}">
+            <span>${escapeHTML(post.media?.[0]?.src || 'photo')}</span>
+          </button>
+        `)
+        .join('')}
+    </div>
+  `;
+  container.onclick = (event) => {
+    const btn = event.target.closest('[data-post-id]');
+    if (!btn) return;
+    openLightbox(btn.dataset.postId);
+  };
+}
+
+async function openLightbox(postId) {
+  let lightbox = q('#lightbox');
+  if (!lightbox) {
+    lightbox = document.createElement('section');
+    lightbox.id = 'lightbox';
+    lightbox.className = 'lightbox';
+    lightbox.innerHTML = `
+      <div class="lightbox__image" id="lightboxImage"></div>
+    `;
+    document.body.appendChild(lightbox);
+    lightbox.addEventListener('click', () => lightbox.classList.remove('active'));
+  }
+  const post = await dataLayer.get('posts', postId);
+  q('#lightboxImage').textContent = post.media?.[0]?.src || 'photo';
+  lightbox.classList.add('active');
+}
+
+async function renderSearch() {
+  const container = UI.screens.search;
+  container.innerHTML = `
+    <div class="search-header">
+      <input type="search" id="searchInput" placeholder="Поиск или dev:1234" value="${escapeHTML(state.searchQuery)}" aria-label="Строка поиска">
+      <div class="search-categories" role="tablist">
+        ${['people', 'posts', 'videos', 'photos', 'chats']
+          .map(
+            (cat) => `
+              <button role="tab" data-cat="${cat}" aria-pressed="${state.searchCategory === cat}">
+                ${cat.toUpperCase()}
+              </button>
+            `
+          )
+          .join('')}
+      </div>
+    </div>
+    <div id="searchResults"></div>
+  `;
+  const input = q('#searchInput', container);
+  input.addEventListener('input', async (event) => {
+    const value = event.target.value;
+    state.searchQuery = value;
+    if (value.startsWith(DEV_CODE)) {
+      openDevPanel();
+      state.searchQuery = '';
+      event.target.value = '';
+      await renderSearchResults();
+    } else {
+      await renderSearchResults();
+    }
+  });
+  qa('[data-cat]', container).forEach((btn) => {
+    btn.addEventListener('click', async () => {
+      state.searchCategory = btn.dataset.cat;
+      qa('[data-cat]', container).forEach((b) => b.setAttribute('aria-pressed', String(b === btn)));
+      await renderSearchResults();
+    });
+  });
+  await renderSearchResults();
+}
+
+async function renderSearchResults() {
+  const resultsContainer = q('#searchResults');
+  const term = state.searchQuery.toLowerCase();
+  const cat = state.searchCategory;
+  let results = [];
+  if (!term) {
+    resultsContainer.innerHTML = '<p class="text-muted">Начните ввод для поиска.</p>';
+    return;
+  }
+  switch (cat) {
+    case 'people': {
+      const users = await dataLayer.getAll('users');
+      results = users.filter((user) => user.name.toLowerCase().includes(term));
+      resultsContainer.innerHTML = results
+        .map((user) => `<div class="card">${escapeHTML(user.name)}<br><span class="text-muted">${escapeHTML(user.bio || '')}</span></div>`)
+        .join('');
+      break;
+    }
+    case 'posts': {
+      const posts = await dataLayer.getAll('posts');
+      results = posts.filter((post) => post.content.toLowerCase().includes(term));
+      resultsContainer.innerHTML = results
+        .map((post) => `<div class="card">${escapeHTML(post.content)}</div>`)
+        .join('');
+      break;
+    }
+    case 'videos': {
+      const posts = await dataLayer.getAll('posts', 'by_type', 'video');
+      results = posts.filter((post) => post.content.toLowerCase().includes(term));
+      resultsContainer.innerHTML = results
+        .map((post) => `<div class="card">Видео: ${escapeHTML(post.content)}</div>`)
+        .join('');
+      break;
+    }
+    case 'photos': {
+      const posts = await dataLayer.getAll('posts', 'by_type', 'photo');
+      results = posts.filter((post) => post.content.toLowerCase().includes(term));
+      resultsContainer.innerHTML = results
+        .map((post) => `<div class="card">Фото: ${escapeHTML(post.content)}</div>`)
+        .join('');
+      break;
+    }
+    case 'chats': {
+      const chats = await dataLayer.getAll('chats');
+      results = chats.filter((chat) => chat.title.toLowerCase().includes(term));
+      resultsContainer.innerHTML = results
+        .map((chat) => `<div class="card">Чат: ${escapeHTML(chat.title)}</div>`)
+        .join('');
+      break;
+    }
+    default:
+      resultsContainer.innerHTML = '<p>Нет результатов</p>';
+  }
+}
+
+async function renderProfile() {
+  const container = UI.screens.profile;
+  const users = await dataLayer.getAll('users');
+  const profiles = await dataLayer.getAll('profiles');
+  const activeProfile = profiles.find((p) => p.id === state.activeProfileId);
+  const user = users.find((u) => u.id === activeProfile?.userId);
+  container.innerHTML = `
+    <section class="card profile-card">
+      <div class="avatar">${escapeHTML(user?.name?.slice(0, 2) || 'ME')}</div>
+      <div>
+        <h2>${escapeHTML(user?.name || 'Профиль')}</h2>
+        <p class="text-muted">${escapeHTML(user?.bio || '')}</p>
+      </div>
+    </section>
+    <section class="profile-switcher">
+      ${profiles
+        .map(
+          (profile) => `
+            <button data-profile-id="${profile.id}" aria-pressed="${profile.id === state.activeProfileId}">
+              ${escapeHTML(profile.handle || profile.id)}
+            </button>
+          `
+        )
+        .join('')}
+    </section>
+    <div class="self-chat">
+      <span>Self-chat</span>
+      <button id="openSelfChat">Открыть</button>
+    </div>
+  `;
+  qa('[data-profile-id]', container).forEach((btn) => {
+    btn.addEventListener('click', async () => {
+      await setActiveProfile(btn.dataset.profileId);
+    });
+  });
+  q('#openSelfChat', container)?.addEventListener('click', async () => {
+    const chats = await dataLayer.getAll('chats');
+    let chat = chats.find((c) => c.participants.length === 1 && c.participants[0] === state.activeProfileId);
+    if (!chat) {
+      chat = {
+        id: generateId('chat'),
+        type: 'personal',
+        title: 'Сам себе',
+        participants: [state.activeProfileId],
+        pinned: true,
+        archived: false,
+        lastMessageId: null,
+      };
+      await dataLayer.put('chats', chat);
+    }
+    openChat(chat.id);
+  });
+}
+
+async function setActiveProfile(profileId) {
+  const profiles = await dataLayer.getAll('profiles');
+  await dataLayer.bulkPut(
+    'profiles',
+    profiles.map((profile) => ({ ...profile, active: profile.id === profileId }))
+  );
+  state.activeProfileId = profileId;
+  await renderScreen(state.activeScreen);
+}
+
+function renderDevPanelTabs(activeTab) {
+  UI.dev.tabButtons.forEach((btn) => {
+    const isActive = btn.dataset.tab === activeTab;
+    btn.setAttribute('aria-selected', isActive);
+    const tab = q(`.dev-tab[data-tab="${btn.dataset.tab}"]`);
+    tab.classList.toggle('active', isActive);
+  });
+}
+
+async function refreshDevData() {
+  const store = UI.dev.tableSelect.value || 'profiles';
+  const filter = (UI.dev.filterInput.value || '').toLowerCase();
+  const data = await dataLayer.getAll(store);
+  const filtered = filter
+    ? data.filter((item) => JSON.stringify(item).toLowerCase().includes(filter))
+    : data;
+  UI.dev.data.textContent = JSON.stringify(filtered, null, 2);
+  const logs = await dataLayer.getAll('logs');
+  logs.sort((a, b) => b.time - a.time);
+  UI.dev.logs.textContent = logs
+    .map((log) => `${new Date(log.time).toISOString()} :: ${log.action} :: ${JSON.stringify(log.payload)}`)
+    .join('\n');
+}
+
+async function openDevPanel() {
+  UI.dev.panel.classList.add('active');
+  UI.dev.panel.setAttribute('aria-hidden', 'false');
+  UI.dev.backdrop.hidden = false;
+  await refreshDevData();
+}
+
+function closeDevPanel() {
+  UI.dev.panel.classList.remove('active');
+  UI.dev.panel.setAttribute('aria-hidden', 'true');
+  UI.dev.backdrop.hidden = true;
+}
+
+function updateReduceMotionToggle() {
+  UI.dev.reduceMotion.checked = state.reduceMotion;
+  document.body.classList.toggle('reduced-motion', state.reduceMotion);
+}
+
+async function initDevPanel() {
+  UI.dev.close.addEventListener('click', closeDevPanel);
+  UI.dev.backdrop.addEventListener('click', closeDevPanel);
+  UI.dev.tabs.addEventListener('click', (event) => {
+    const btn = event.target.closest('button[data-tab]');
+    if (!btn) return;
+    renderDevPanelTabs(btn.dataset.tab);
+  });
+  UI.dev.tableSelect.addEventListener('change', refreshDevData);
+  UI.dev.filterInput.addEventListener('input', refreshDevData);
+  UI.dev.refresh.addEventListener('click', refreshDevData);
+  UI.dev.exportBtn.addEventListener('click', async () => {
+    const data = {};
+    for (const store of STORES) {
+      data[store] = await dataLayer.getAll(store);
+    }
+    UI.dev.editor.value = JSON.stringify(data, null, 2);
+  });
+  UI.dev.importBtn.addEventListener('click', () => {
+    const fileInput = document.createElement('input');
+    fileInput.type = 'file';
+    fileInput.accept = 'application/json';
+    fileInput.addEventListener('change', async () => {
+      const file = fileInput.files[0];
+      if (!file) return;
+      const text = await file.text();
+      UI.dev.editor.value = text;
+    });
+    fileInput.click();
+  });
+  UI.dev.applyBtn.addEventListener('click', async () => {
+    try {
+      const payload = JSON.parse(UI.dev.editor.value);
+      for (const store of Object.keys(payload)) {
+        if (!STORES.includes(store)) continue;
+        await dataLayer.bulkPut(store, payload[store]);
+      }
+      await refreshDevData();
+    } catch (error) {
+      alert('Некорректный JSON');
+    }
+  });
+  UI.dev.resetBtn.addEventListener('click', async () => {
+    if (!confirm('Сбросить базу?')) return;
+    await dataLayer.clearAll();
+    await dataLayer.seed();
+    await refreshDevData();
+    await renderScreen(state.activeScreen);
+  });
+  UI.dev.reduceMotion.addEventListener('change', () => {
+    state.reduceMotion = UI.dev.reduceMotion.checked;
+    updateReduceMotionToggle();
+    localStorage.setItem('mono-reduced-motion', state.reduceMotion ? '1' : '0');
+  });
+}
+
+function initNav() {
+  UI.nav.addEventListener('click', async (event) => {
+    const btn = event.target.closest('.nav-item');
+    if (!btn) return;
+    state.activeScreen = btn.dataset.target;
+    renderNav();
+    await renderScreen(state.activeScreen);
+  });
+  UI.backButton.addEventListener('click', async () => {
+    if (state.activeScreen === 'chat') {
+      state.activeScreen = 'chats';
+      renderNav();
+      await renderScreen('chats');
+    }
+  });
+}
+
+function restorePreferences() {
+  const stored = localStorage.getItem('mono-reduced-motion');
+  if (stored === '1') {
+    state.reduceMotion = true;
+  }
+  updateReduceMotionToggle();
+}
+
+async function init() {
+  await dataLayer.open();
+  restorePreferences();
+  initNav();
+  await initDevPanel();
+  await loadState();
+}
+
+document.addEventListener('DOMContentLoaded', init);
diff --git a/design-spec.md b/design-spec.md
new file mode 100644
index 0000000..212bd60
--- /dev/null
+++ b/design-spec.md
@@ -0,0 +1,46 @@
+# Mono Super Platform — Design Spec
+
+## Foundations
+- **Palette:** чисто монохромная. Используются переменные `--bg`, `--bg-dark`, `--fg`, `--muted`, `--line`.
+- **Типографика:** базовый размер `16px`, заголовки `18-22px`, второстепенный текст `13px`.
+- **Иконки:** stroke-only SVG 24px.
+- **Эффекты:** мягкие тени, стеклянный фон `--glass-alpha`, плавные скроллы и переходы `--t-medium`, `--easing`.
+- **Тактильность:** элементы при нажатии слегка масштабируются `scale(0.985)`.
+
+## Компоненты
+- **Top Bar:** высота 56px, blur + стекло, держит кнопку назад и контекстные действия.
+- **Bottom Nav:** фиксированная решётка из 6 кнопок, каждая ≥44px.
+- **Card:** радиус `--r-md`, тень 12/24px, стекло.
+- **Avatar:** квадрат 48px с мягким градиентом.
+- **Composer:** фиксированная панель с textarea до 3 строк и кнопкой отправки.
+- **Badges:** инвертный фон `--fg` / текст `--bg`.
+
+## Экраны
+1. **Чаты:** список карточек, свайп-акции (пин/архив/удалить), бейджи непрочитанных.
+2. **Чат:** пузырьки, контекстное меню (копировать/ответить/редактировать/удалить).
+3. **Лента:** посты текст/медиа, действия (лайк, репост, коммент, share), счётчики.
+4. **Видео:** карточки + полноэкранный плейер с mock controls и комментариями.
+5. **Фото:** сетка 2×N, лайтбокс + комментарии.
+6. **Поиск:** поле, категории (People / Posts / Videos / Photos / Chats), ввод `dev:1234` → Dev Mode.
+7. **Профиль:** переключение профилей, настройки, Self-chat.
+8. **Dev Mode:** табы DB / Editor / Logs / Settings, моноширинный шрифт.
+
+## Анимации
+- Переходы экранов — slide + fade (`--t-medium`).
+- Нажатие кнопок — уменьшение, лёгкое затемнение.
+- Отправка сообщений — выезд слева/справа (JS).
+- Свайпы чатов — следуют пальцу, откатываются при отмене.
+- Поддержка `prefers-reduced-motion` и внутреннего переключателя в Dev Mode.
+
+## UX & Accessibility
+- Контраст ≥ WCAG AA.
+- Touch target ≥ 44px.
+- Кастомный focus ring (inset). Без системных outline.
+- Все текстовые поля экранируют HTML (escape).
+- Навигация доступна с клавиатуры.
+- Dev Mode использует IndexedDB и позволяет экспорт/импорт JSON seed.
+
+## Assets
+- `icons.svg` — набор символов для спрайта.
+- `seed-db.json` — минимальный набор данных для загрузки.
+
diff --git a/icons.svg b/icons.svg
new file mode 100644
index 0000000..30e4c88
--- /dev/null
+++ b/icons.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
+  <symbol id="chat" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M4 5h16v11H7l-3 3z" />
+  </symbol>
+  <symbol id="feed" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M5 4h14v4H5zM5 10h14v4H5zM5 16h9v4H5z" />
+  </symbol>
+  <symbol id="video" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <rect x="3" y="5" width="14" height="14" rx="3"/>
+    <path d="M17 9l4-2v10l-4-2"/>
+  </symbol>
+  <symbol id="photo" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <rect x="3" y="4" width="18" height="16" rx="3"/>
+    <circle cx="9" cy="10" r="2.5"/>
+    <path d="M21 15l-4-4-6 6"/>
+  </symbol>
+  <symbol id="search" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="11" cy="11" r="6"/>
+    <path d="M20 20l-3.5-3.5"/>
+  </symbol>
+  <symbol id="profile" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="12" cy="8" r="4"/>
+    <path d="M5 20c1.5-3 4.5-5 7-5s5.5 2 7 5"/>
+  </symbol>
+  <symbol id="chevron-left" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M15 6l-6 6 6 6" />
+  </symbol>
+  <symbol id="more" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="6" cy="12" r="1"/>
+    <circle cx="12" cy="12" r="1"/>
+    <circle cx="18" cy="12" r="1"/>
+  </symbol>
+  <symbol id="close" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M6 6l12 12M6 18L18 6"/>
+  </symbol>
+  <symbol id="like" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M12 20l-7-7a4 4 0 016-6l1 1 1-1a4 4 0 016 6z"/>
+  </symbol>
+  <symbol id="comment" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M4 5h16v11H8l-4 4z"/>
+  </symbol>
+  <symbol id="share" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M4 12v7h16v-7"/>
+    <path d="M12 4v12"/>
+    <path d="M8 8l4-4 4 4"/>
+  </symbol>
+  <symbol id="repost" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M6 17h9a3 3 0 003-3V5"/>
+    <path d="M15 8l3-3 3 3"/>
+    <path d="M18 7H9a3 3 0 00-3 3v9"/>
+    <path d="M9 16l-3 3-3-3"/>
+  </symbol>
+  <symbol id="pin" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M8 3h8l-2 6v5l2 2v1H8v-1l2-2V9z"/>
+  </symbol>
+  <symbol id="archive" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <rect x="4" y="5" width="16" height="15" rx="2"/>
+    <path d="M4 9h16"/>
+    <path d="M10 13h4"/>
+  </symbol>
+  <symbol id="delete" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M5 7h14"/>
+    <path d="M10 11v6"/>
+    <path d="M14 11v6"/>
+    <path d="M6 7l1 12a2 2 0 002 2h6a2 2 0 002-2l1-12"/>
+    <path d="M9 7V4h6v3"/>
+  </symbol>
+  <symbol id="copy" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <rect x="9" y="9" width="11" height="11" rx="2"/>
+    <path d="M6 15H5a2 2 0 01-2-2V5a2 2 0 012-2h8a2 2 0 012 2v1"/>
+  </symbol>
+  <symbol id="reply" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M7 7l-4 4 4 4"/>
+    <path d="M3 11h10a7 7 0 017 7v1"/>
+  </symbol>
+  <symbol id="edit" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M4 20h4l10-10-4-4L4 16z"/>
+    <path d="M14 6l4 4"/>
+  </symbol>
+</svg>
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..9a4f168
--- /dev/null
+++ b/index.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+  <title>Mono Super Platform</title>
+  <link rel="preload" href="icons.svg" as="image" type="image/svg+xml">
+  <link rel="stylesheet" href="styles.css">
+  <script type="module" src="app.js" defer></script>
+</head>
+<body>
+  <div id="app" class="app" aria-live="polite">
+    <header class="top-bar" role="banner">
+      <button class="icon-button" id="backButton" aria-label="Назад" data-visible="false">
+        <svg><use href="icons.svg#chevron-left"></use></svg>
+      </button>
+      <div class="top-bar__title" id="topTitle">Супер</div>
+      <button class="icon-button" id="topAction" aria-label="Действия" data-visible="false">
+        <svg><use href="icons.svg#more"></use></svg>
+      </button>
+    </header>
+
+    <main id="main" class="main" role="main">
+      <div class="screen" id="screen-chats" data-screen="chats" aria-hidden="false"></div>
+      <div class="screen" id="screen-chat" data-screen="chat" aria-hidden="true"></div>
+      <div class="screen" id="screen-feed" data-screen="feed" aria-hidden="true"></div>
+      <div class="screen" id="screen-video" data-screen="video" aria-hidden="true"></div>
+      <div class="screen" id="screen-photo" data-screen="photo" aria-hidden="true"></div>
+      <div class="screen" id="screen-search" data-screen="search" aria-hidden="true"></div>
+      <div class="screen" id="screen-profile" data-screen="profile" aria-hidden="true"></div>
+    </main>
+
+    <nav class="bottom-nav" role="navigation" aria-label="Главная навигация">
+      <button class="nav-item" data-target="chats" aria-label="Чаты">
+        <svg><use href="icons.svg#chat"></use></svg>
+        <span>Чаты</span>
+      </button>
+      <button class="nav-item" data-target="feed" aria-label="Лента">
+        <svg><use href="icons.svg#feed"></use></svg>
+        <span>Лента</span>
+      </button>
+      <button class="nav-item" data-target="video" aria-label="Видео">
+        <svg><use href="icons.svg#video"></use></svg>
+        <span>Видео</span>
+      </button>
+      <button class="nav-item" data-target="photo" aria-label="Фото">
+        <svg><use href="icons.svg#photo"></use></svg>
+        <span>Фото</span>
+      </button>
+      <button class="nav-item" data-target="search" aria-label="Поиск">
+        <svg><use href="icons.svg#search"></use></svg>
+        <span>Поиск</span>
+      </button>
+      <button class="nav-item" data-target="profile" aria-label="Профиль">
+        <svg><use href="icons.svg#profile"></use></svg>
+        <span>Профиль</span>
+      </button>
+    </nav>
+  </div>
+
+  <div class="dev-panel" id="devPanel" aria-hidden="true" role="dialog" aria-modal="true">
+    <div class="dev-panel__header">
+      <span>Developer Mode</span>
+      <button class="icon-button" id="closeDev" aria-label="Закрыть Dev Mode">
+        <svg><use href="icons.svg#close"></use></svg>
+      </button>
+    </div>
+    <div class="dev-panel__tabs" role="tablist">
+      <button role="tab" data-tab="db" aria-selected="true">DB</button>
+      <button role="tab" data-tab="editor" aria-selected="false">Editor</button>
+      <button role="tab" data-tab="logs" aria-selected="false">Logs</button>
+      <button role="tab" data-tab="settings" aria-selected="false">Settings</button>
+    </div>
+    <div class="dev-panel__content" id="devContent">
+      <section data-tab="db" aria-labelledby="DB" class="dev-tab active">
+        <div class="dev-toolbar">
+          <label>
+            Таблица
+            <select id="devTable"></select>
+          </label>
+          <input type="search" id="devFilter" placeholder="Фильтр" aria-label="Фильтр записей">
+          <button id="devRefresh">Обновить</button>
+        </div>
+        <pre class="dev-pre" id="devData" tabindex="0"></pre>
+      </section>
+      <section data-tab="editor" class="dev-tab">
+        <textarea id="devEditor" spellcheck="false" aria-label="JSON редактор"></textarea>
+        <div class="dev-actions">
+          <button id="devImport">Импорт</button>
+          <button id="devExport">Экспорт</button>
+          <button id="devApply">Применить</button>
+        </div>
+      </section>
+      <section data-tab="logs" class="dev-tab">
+        <pre class="dev-pre" id="devLogs" tabindex="0"></pre>
+      </section>
+      <section data-tab="settings" class="dev-tab">
+        <div class="dev-settings">
+          <button id="devReset">Сбросить базу</button>
+          <label class="toggle">
+            <input type="checkbox" id="reduceMotion">
+            <span>Prefers Reduced Motion</span>
+          </label>
+        </div>
+      </section>
+    </div>
+  </div>
+  <div class="dev-panel__backdrop" id="devBackdrop" hidden></div>
+</body>
+</html>
diff --git a/seed-db.json b/seed-db.json
new file mode 100644
index 0000000..abb3622
--- /dev/null
+++ b/seed-db.json
@@ -0,0 +1,37 @@
+{
+  "users": [
+    { "id": "u1", "name": "Алекс", "avatar": "", "bio": "Интерфейсы и прототипы", "createdAt": 1690000000000 },
+    { "id": "u2", "name": "Мария", "avatar": "", "bio": "Фотограф", "createdAt": 1691000000000 }
+  ],
+  "profiles": [
+    { "id": "p1", "userId": "u1", "handle": "alex.design", "settings": { "notifications": true }, "active": true },
+    { "id": "p2", "userId": "u2", "handle": "maria.lens", "settings": { "notifications": true }, "active": false }
+  ],
+  "chats": [
+    { "id": "c1", "type": "personal", "title": "Сам себе", "participants": ["p1"], "pinned": true, "archived": false, "lastMessageId": "m3" },
+    { "id": "c2", "type": "dialog", "title": "Алекс ↔ Мария", "participants": ["p1", "p2"], "pinned": false, "archived": false, "lastMessageId": "m5" },
+    { "id": "c3", "type": "channel", "title": "Mono Updates", "participants": ["p1"], "pinned": false, "archived": false, "lastMessageId": "m6" }
+  ],
+  "messages": [
+    { "id": "m1", "chatId": "c1", "senderProfileId": "p1", "text": "Привет себе!", "attachments": [], "time": 1690000000100, "edited": false, "deleted": false },
+    { "id": "m2", "chatId": "c1", "senderProfileId": "p1", "text": "Помни про демо", "attachments": [], "time": 1690000500000, "edited": false, "deleted": false },
+    { "id": "m3", "chatId": "c1", "senderProfileId": "p1", "text": "Проверить Dev Mode", "attachments": [], "time": 1690000800000, "edited": false, "deleted": false },
+    { "id": "m4", "chatId": "c2", "senderProfileId": "p1", "text": "Как продвигается фотосъёмка?", "attachments": [], "time": 1691000000000, "edited": false, "deleted": false },
+    { "id": "m5", "chatId": "c2", "senderProfileId": "p2", "text": "Готовлю подборку для ленты", "attachments": [], "time": 1691000600000, "edited": false, "deleted": false },
+    { "id": "m6", "chatId": "c3", "senderProfileId": "p1", "text": "Mono Super Platform 0.1 вышла!", "attachments": [], "time": 1691100000000, "edited": false, "deleted": false }
+  ],
+  "posts": [
+    { "id": "post1", "authorProfileId": "p1", "type": "text", "content": "Новый дизайн Mono Super Platform.", "media": [], "time": 1691105000000, "likesCount": 3 },
+    { "id": "post2", "authorProfileId": "p2", "type": "photo", "content": "Кадр из ночного города.", "media": [{ "kind": "photo", "src": "photo-01" }], "time": 1691200000000, "likesCount": 5 },
+    { "id": "post3", "authorProfileId": "p2", "type": "video", "content": "Мини-клип с backstage.", "media": [{ "kind": "video", "src": "video-01" }], "time": 1691204000000, "likesCount": 2 }
+  ],
+  "comments": [
+    { "id": "cm1", "postId": "post1", "authorProfileId": "p2", "text": "Жду релиз!", "time": 1691108000000 },
+    { "id": "cm2", "postId": "post2", "authorProfileId": "p1", "text": "Отличная композиция", "time": 1691202000000 }
+  ],
+  "likes": [
+    { "id": "lk1", "postId": "post1", "profileId": "p2", "time": 1691105100000 },
+    { "id": "lk2", "postId": "post2", "profileId": "p1", "time": 1691202100000 }
+  ],
+  "logs": []
+}
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..fbbebf3
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,724 @@
+:root {
+  --bg: #ffffff;
+  --bg-dark: #000000;
+  --fg: #0B0B0B;
+  --muted: #8A8A8A;
+  --line: #E6E6E6;
+  --elev-1: rgba(0, 0, 0, 0.04);
+  --glass-alpha: 0.06;
+
+  --fs-sm: 13px;
+  --fs-base: 16px;
+  --fs-md: 18px;
+  --fs-lg: 22px;
+
+  --gap-1: 4px;
+  --gap-2: 8px;
+  --gap-3: 12px;
+  --gap-4: 16px;
+
+  --r-sm: 8px;
+  --r-md: 14px;
+  --r-lg: 20px;
+
+  --t-fast: 140ms;
+  --t-medium: 240ms;
+  --t-slow: 360ms;
+  --easing: cubic-bezier(.2, .9, .25, 1);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  background: var(--bg);
+  color: var(--fg);
+  font-family: "SF Pro Text", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
+  font-size: var(--fs-base);
+  line-height: 1.4;
+  -webkit-tap-highlight-color: transparent;
+}
+
+body {
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+}
+
+.text-muted {
+  color: var(--muted);
+  font-size: var(--fs-sm);
+}
+
+.text-strong {
+  font-weight: 600;
+}
+
+body.reduced-motion * {
+  animation-duration: 1ms !important;
+  animation-iteration-count: 1 !important;
+  transition-duration: 1ms !important;
+}
+
+.app {
+  width: min(420px, 100vw);
+  min-height: 100vh;
+  background: color-mix(in srgb, var(--bg) 85%, rgba(255, 255, 255, 0.8) 15%);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.top-bar {
+  height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--gap-4);
+  backdrop-filter: blur(18px);
+  background: rgba(255, 255, 255, var(--glass-alpha));
+  border-bottom: 1px solid var(--line);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.top-bar__title {
+  font-weight: 600;
+  font-size: var(--fs-md);
+}
+
+.icon-button {
+  width: 44px;
+  height: 44px;
+  border-radius: 999px;
+  border: none;
+  background: transparent;
+  display: grid;
+  place-items: center;
+  padding: 0;
+  transition: transform var(--t-fast) var(--easing),
+    background var(--t-fast) var(--easing),
+    opacity var(--t-fast) var(--easing);
+}
+
+.icon-button[data-visible="false"] {
+  visibility: hidden;
+  opacity: 0;
+}
+
+.icon-button:active {
+  transform: scale(0.97);
+}
+
+.icon-button:focus-visible,
+.nav-item:focus-visible,
+button:focus-visible,
+input:focus-visible,
+textarea:focus-visible,
+select:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.8);
+}
+
+svg {
+  width: 24px;
+  height: 24px;
+  stroke: var(--fg);
+  fill: none;
+}
+
+.main {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+}
+
+.screen {
+  position: absolute;
+  inset: 0;
+  overflow-y: auto;
+  padding: var(--gap-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-3);
+  background: transparent;
+  opacity: 0;
+  transform: translateX(10%);
+  pointer-events: none;
+  transition: opacity var(--t-medium) var(--easing), transform var(--t-medium) var(--easing);
+}
+
+.screen[aria-hidden="false"] {
+  opacity: 1;
+  transform: translateX(0);
+  pointer-events: auto;
+}
+
+.bottom-nav {
+  height: 64px;
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  align-items: center;
+  border-top: 1px solid var(--line);
+  background: rgba(255, 255, 255, var(--glass-alpha));
+  backdrop-filter: blur(16px);
+  padding: 0 var(--gap-2);
+}
+
+.nav-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--gap-1);
+  background: none;
+  border: none;
+  color: var(--muted);
+  font-size: var(--fs-sm);
+  padding: var(--gap-1);
+  min-height: 44px;
+  min-width: 44px;
+  border-radius: var(--r-sm);
+  transition: background var(--t-fast) var(--easing), color var(--t-fast) var(--easing), transform var(--t-fast) var(--easing);
+}
+
+.nav-item[aria-current="page"] {
+  color: var(--fg);
+  background: rgba(0, 0, 0, 0.06);
+}
+
+.nav-item:active {
+  transform: scale(0.985);
+}
+
+.card {
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: var(--r-md);
+  padding: var(--gap-4);
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  display: grid;
+  gap: var(--gap-2);
+}
+
+.chat-card {
+  display: grid;
+  grid-template-columns: 48px 1fr auto;
+  gap: var(--gap-3);
+  align-items: center;
+  position: relative;
+  min-height: 64px;
+}
+
+.avatar {
+  width: 48px;
+  height: 48px;
+  border-radius: 16px;
+  background: linear-gradient(145deg, rgba(0,0,0,0.85), rgba(255,255,255,0.1));
+  display: grid;
+  place-items: center;
+  color: #fff;
+  font-weight: 600;
+}
+
+.badge {
+  min-width: 20px;
+  padding: 2px 6px;
+  border-radius: 999px;
+  font-size: var(--fs-sm);
+  background: var(--fg);
+  color: var(--bg);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.chat-actions {
+  position: absolute;
+  inset: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  pointer-events: none;
+}
+
+.chat-actions button {
+  pointer-events: auto;
+  background: rgba(0,0,0,0.85);
+  color: #fff;
+  border: none;
+  border-radius: var(--r-sm);
+  padding: var(--gap-2) var(--gap-3);
+  font-size: var(--fs-sm);
+  min-height: 44px;
+}
+
+.message-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-3);
+  padding-bottom: 120px;
+}
+
+.message {
+  max-width: 80%;
+  padding: var(--gap-3);
+  border-radius: var(--r-lg);
+  background: rgba(0,0,0,0.06);
+  align-self: flex-start;
+  position: relative;
+}
+
+.message--own {
+  align-self: flex-end;
+  background: rgba(0,0,0,0.9);
+  color: var(--bg);
+}
+
+.message__meta {
+  font-size: var(--fs-sm);
+  color: var(--muted);
+  margin-top: var(--gap-1);
+}
+
+.message__reply {
+  font-size: var(--fs-sm);
+  color: var(--muted);
+  border-left: 2px solid rgba(0, 0, 0, 0.1);
+  padding-left: var(--gap-2);
+  margin-bottom: var(--gap-2);
+}
+
+.message__menu {
+  position: absolute;
+  top: -12px;
+  right: -12px;
+}
+
+.composer {
+  position: fixed;
+  bottom: 72px;
+  width: min(420px, 100vw);
+  display: flex;
+  align-items: flex-end;
+  gap: var(--gap-2);
+  padding: var(--gap-3) var(--gap-4);
+  background: rgba(255,255,255,0.96);
+  backdrop-filter: blur(16px);
+  border-top: 1px solid var(--line);
+}
+
+.composer__reply {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  background: rgba(0,0,0,0.05);
+  border-radius: var(--r-sm);
+  padding: var(--gap-2) var(--gap-3);
+  font-size: var(--fs-sm);
+  color: var(--muted);
+}
+
+.composer__reply button {
+  border: none;
+  background: none;
+  color: inherit;
+  font-size: var(--fs-sm);
+}
+
+.composer textarea {
+  flex: 1;
+  resize: none;
+  min-height: 44px;
+  max-height: calc(44px * 3);
+  border-radius: var(--r-md);
+  border: 1px solid var(--line);
+  padding: var(--gap-2) var(--gap-3);
+  font-family: inherit;
+  font-size: var(--fs-base);
+  background: rgba(0,0,0,0.02);
+}
+
+.composer button {
+  width: 52px;
+  height: 52px;
+  border-radius: var(--r-md);
+  border: none;
+  background: rgba(0,0,0,0.9);
+  color: var(--bg);
+  font-weight: 600;
+  transition: transform var(--t-fast) var(--easing), opacity var(--t-fast) var(--easing);
+}
+
+.composer button:active {
+  transform: scale(0.985);
+}
+
+.feed-card {
+  display: grid;
+  gap: var(--gap-3);
+}
+
+.feed-card__header {
+  display: flex;
+  gap: var(--gap-3);
+  align-items: center;
+}
+
+.feed-card__actions {
+  display: flex;
+  gap: var(--gap-3);
+}
+
+.feed-card__actions button {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-1);
+  border: none;
+  background: rgba(0,0,0,0.04);
+  padding: var(--gap-2) var(--gap-3);
+  border-radius: var(--r-sm);
+  min-height: 44px;
+}
+
+.media-thumb {
+  aspect-ratio: 16 / 9;
+  border-radius: var(--r-md);
+  background: linear-gradient(135deg, rgba(0,0,0,0.92), rgba(255,255,255,0.08));
+  display: grid;
+  place-items: center;
+  color: rgba(255,255,255,0.92);
+  font-weight: 600;
+  font-size: var(--fs-lg);
+}
+
+.photo-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--gap-2);
+}
+
+.photo-grid__item {
+  aspect-ratio: 1;
+  border-radius: var(--r-md);
+  background: linear-gradient(120deg, rgba(0,0,0,0.92), rgba(255,255,255,0.08));
+  overflow: hidden;
+  position: relative;
+}
+
+.photo-grid__item span {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  color: rgba(255,255,255,0.95);
+  font-weight: 600;
+}
+
+.lightbox {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.92);
+  display: none;
+  align-items: center;
+  justify-content: center;
+  padding: var(--gap-4);
+  z-index: 20;
+}
+
+.lightbox.active {
+  display: flex;
+}
+
+.lightbox__image {
+  width: 100%;
+  max-width: 360px;
+  aspect-ratio: 1;
+  border-radius: var(--r-lg);
+  background: #111;
+  display: grid;
+  place-items: center;
+  color: #fff;
+  font-size: var(--fs-lg);
+}
+
+.search-header {
+  display: grid;
+  gap: var(--gap-3);
+}
+
+.search-categories {
+  display: flex;
+  gap: var(--gap-2);
+  overflow-x: auto;
+}
+
+.search-categories button {
+  border: 1px solid var(--line);
+  background: rgba(0,0,0,0.02);
+  padding: var(--gap-2) var(--gap-3);
+  border-radius: var(--r-md);
+  min-height: 44px;
+}
+
+.search-categories button[aria-pressed="true"] {
+  background: rgba(0,0,0,0.1);
+}
+
+.profile-card {
+  display: flex;
+  gap: var(--gap-3);
+  align-items: center;
+}
+
+.profile-switcher {
+  display: grid;
+  gap: var(--gap-3);
+}
+
+.profile-switcher button {
+  border: 1px solid var(--line);
+  background: rgba(0,0,0,0.05);
+  padding: var(--gap-3);
+  border-radius: var(--r-md);
+  min-height: 44px;
+}
+
+.self-chat {
+  margin-top: var(--gap-3);
+  padding: var(--gap-3);
+  border-radius: var(--r-md);
+  border: 1px solid var(--line);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.self-chat button {
+  min-height: 44px;
+  min-width: 88px;
+  border: 1px solid var(--line);
+  border-radius: var(--r-sm);
+  background: rgba(0,0,0,0.85);
+  color: var(--bg);
+}
+
+.video-viewer {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.92);
+  display: none;
+  flex-direction: column;
+  padding: var(--gap-4);
+  gap: var(--gap-3);
+  z-index: 25;
+}
+
+.video-viewer.active {
+  display: flex;
+}
+
+.video-player {
+  flex: 1;
+  border-radius: var(--r-lg);
+  background: linear-gradient(145deg, rgba(0,0,0,0.85), rgba(255,255,255,0.08));
+  display: grid;
+  place-items: center;
+  color: #fff;
+  font-size: var(--fs-lg);
+  position: relative;
+}
+
+.video-controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.video-comments {
+  background: rgba(255,255,255,0.06);
+  border-radius: var(--r-md);
+  padding: var(--gap-3);
+  color: #f5f5f5;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.bottom-sheet {
+  position: fixed;
+  bottom: 72px;
+  width: min(420px, 100vw);
+  background: rgba(255,255,255,0.98);
+  border-radius: var(--r-lg) var(--r-lg) 0 0;
+  box-shadow: 0 -12px 30px rgba(0,0,0,0.12);
+  padding: var(--gap-4);
+  display: none;
+  z-index: 30;
+}
+
+.bottom-sheet.active {
+  display: block;
+}
+
+.context-menu {
+  display: grid;
+  gap: var(--gap-2);
+}
+
+.context-menu button {
+  border: 1px solid var(--line);
+  background: rgba(0,0,0,0.02);
+  padding: var(--gap-2) var(--gap-3);
+  border-radius: var(--r-sm);
+  min-height: 44px;
+}
+
+.dev-panel {
+  position: fixed;
+  inset: 0;
+  margin: auto;
+  width: min(600px, 100vw);
+  height: min(90vh, 720px);
+  background: #111;
+  color: #f2f2f2;
+  border-radius: var(--r-lg);
+  box-shadow: 0 40px 120px rgba(0,0,0,0.45);
+  display: flex;
+  flex-direction: column;
+  z-index: 100;
+  transform: translateY(10%);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--t-medium) var(--easing), transform var(--t-medium) var(--easing);
+}
+
+.dev-panel.active {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
+.dev-panel__backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.6);
+  z-index: 90;
+}
+
+.dev-panel__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--gap-3) var(--gap-4);
+  border-bottom: 1px solid rgba(255,255,255,0.12);
+  font-family: "JetBrains Mono", "SF Mono", monospace;
+}
+
+.dev-panel__tabs {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  border-bottom: 1px solid rgba(255,255,255,0.12);
+}
+
+.dev-panel__tabs button {
+  background: none;
+  border: none;
+  color: inherit;
+  padding: var(--gap-3);
+  font-family: "JetBrains Mono", monospace;
+}
+
+.dev-panel__tabs button[aria-selected="true"] {
+  background: rgba(255,255,255,0.08);
+}
+
+.dev-panel__content {
+  flex: 1;
+  overflow: hidden;
+  display: grid;
+}
+
+.dev-tab {
+  display: none;
+  padding: var(--gap-4);
+  overflow: auto;
+}
+
+.dev-tab.active {
+  display: block;
+}
+
+.dev-pre {
+  background: rgba(0,0,0,0.7);
+  border-radius: var(--r-md);
+  padding: var(--gap-3);
+  font-family: "JetBrains Mono", monospace;
+  font-size: 13px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.dev-toolbar {
+  display: flex;
+  gap: var(--gap-3);
+  align-items: center;
+}
+
+.dev-toolbar select,
+.dev-toolbar input,
+.dev-toolbar button,
+.dev-actions button,
+.dev-settings button {
+  border: 1px solid rgba(255,255,255,0.2);
+  background: rgba(255,255,255,0.04);
+  color: inherit;
+  padding: var(--gap-2) var(--gap-3);
+  border-radius: var(--r-sm);
+  font-family: "JetBrains Mono", monospace;
+}
+
+.dev-actions {
+  display: flex;
+  gap: var(--gap-3);
+  margin-top: var(--gap-3);
+}
+
+.dev-settings {
+  display: grid;
+  gap: var(--gap-3);
+}
+
+.toggle {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-2);
+}
+
+textarea#devEditor {
+  min-height: 240px;
+  width: 100%;
+  background: rgba(0,0,0,0.6);
+  color: #f5f5f5;
+  border: 1px solid rgba(255,255,255,0.12);
+  border-radius: var(--r-md);
+  padding: var(--gap-3);
+  font-family: "JetBrains Mono", monospace;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
