:root { --bg: #0e1621; --panel: #17212b; --panel-2: #1d2b39; --hover: #202b36; --border: #101921; --text: #e9edf0; --muted: #7d8e9e; --accent: #2b9ae8; --accent-2: #3390ec; --bubble-out: #2b5278; --bubble-in: #182533; --danger: #e8534f; --ok: #4dba87; --warn: #e0a644; --chat-bg: #0e1621; } /* Светлая тема (день). Применяется через (см. base.html). */ :root[data-theme="light"] { --bg: #ffffff; --panel: #f5f6f8; --panel-2: #eceef1; --hover: #e9ecf0; --border: #dfe3e8; --text: #14181d; --muted: #7a8794; --accent: #2b9ae8; --accent-2: #3390ec; --bubble-out: #d4ecff; --bubble-in: #f0f2f5; --danger: #d6312c; --ok: #3ca26b; --warn: #c98a1e; --chat-bg: #eef1f5; } :root[data-theme="light"] .msg.out .meta .ticks { color: #2b8ad6; } :root[data-theme="light"] .day-sep { background: rgba(0,0,0,.06); color: var(--muted); } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { background: var(--bg); color: var(--text); font: 15px/1.45 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } a { color: var(--accent); text-decoration: none; } button { font: inherit; cursor: pointer; } input, textarea { font: inherit; } /* ---------- установка веб-приложения ---------- */ .install-steps { margin: 0 0 12px; padding-left: 22px; color: var(--text); font-size: 14px; line-height: 1.5; } .install-steps li { margin-bottom: 6px; } /* ---------- flashes ---------- */ .flashes { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 1000; width: min(440px, 92vw); display: flex; flex-direction: column; gap: 8px; } .flash { padding: 10px 14px; border-radius: 10px; font-size: 14px; background: var(--panel-2); border: 1px solid var(--border); box-shadow: 0 6px 24px rgba(0,0,0,.4); } .flash-danger { border-color: var(--danger); } .flash-success { border-color: var(--ok); } .flash-warning { border-color: var(--warn); } .flash-info { border-color: var(--accent); } /* ---------- auth ---------- */ .auth-wrap { min-height: 100%; display: grid; place-items: center; padding: 24px; } .auth-card { width: min(380px, 94vw); background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 28px 26px; box-shadow: 0 10px 40px rgba(0,0,0,.45); } .auth-card h1 { margin: 0 0 4px; font-size: 24px; } .auth-card .sub { color: var(--muted); margin: 0 0 22px; font-size: 14px; } .field { margin-bottom: 14px; } .field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; } .field input { width: 100%; padding: 11px 13px; border-radius: 10px; color: var(--text); background: var(--bg); border: 1px solid var(--border); outline: none; } .field input:focus { border-color: var(--accent); } .btn { width: 100%; padding: 12px; border: none; border-radius: 10px; color: #fff; background: var(--accent-2); font-weight: 600; } .btn:hover { filter: brightness(1.08); } .btn.secondary { background: var(--panel-2); } .btn.danger { background: var(--danger); } .auth-links { margin-top: 16px; display: flex; justify-content: space-between; font-size: 14px; } .brand { font-weight: 700; letter-spacing: .3px; } /* ---------- chat layout ---------- */ .app { display: grid; grid-template-columns: 320px 1fr; grid-template-rows: minmax(0, 1fr); height: 100vh; } .back-btn { display: none; font-size: 26px; } /* Мобильная раскладка: одна колонка. По умолчанию виден список бесед; при открытии беседы (.chat-open) — панель чата на весь экран + кнопка «Назад». */ @media (max-width: 720px) { html, body { overflow-x: hidden; } .app { grid-template-columns: 1fr; } .app .chat { display: none; } .app.chat-open .sidebar { display: none; } .app.chat-open .chat { display: flex; } .back-btn { display: inline-flex; align-items: center; } } .sidebar { background: var(--panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; min-width: 0; } .sidebar-head { padding: 12px; display: flex; gap: 8px; align-items: center; border-bottom: 1px solid var(--border); } .sidebar-head .me { font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .icon-btn { background: transparent; border: none; color: var(--muted); font-size: 18px; padding: 6px 8px; border-radius: 8px; } .icon-btn:hover { background: var(--hover); color: var(--text); } .search { padding: 10px 12px; border-bottom: 1px solid var(--border); } .search input { width: 100%; padding: 9px 12px; border-radius: 18px; background: var(--bg); border: 1px solid var(--border); color: var(--text); outline: none; } .conv-list { flex: 1; min-height: 0; overflow-y: auto; } .conv { display: flex; gap: 10px; padding: 10px 12px; cursor: pointer; align-items: center; border-bottom: 1px solid rgba(255,255,255,.02); } .conv:hover { background: var(--hover); } .conv.active { background: var(--bubble-out); } .avatar { width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center; background: linear-gradient(135deg, #2b9ae8, #6b5be8); color: #fff; font-weight: 600; position: relative; } .avatar.sm { width: 34px; height: 34px; font-size: 13px; } .dot { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--panel); background: var(--muted); } .dot.online { background: var(--ok); } .conv-main { flex: 1; min-width: 0; } .conv-top { display: flex; justify-content: space-between; gap: 8px; } .conv-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .conv-time { color: var(--muted); font-size: 12px; flex: none; } .conv-bottom { display: flex; justify-content: space-between; gap: 8px; align-items: center; } .conv-preview { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .badge { background: var(--accent-2); color: #fff; font-size: 12px; border-radius: 11px; min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center; } /* ---------- chat panel ---------- */ .chat { display: flex; flex-direction: column; min-width: 0; background: var(--chat-bg); } .chat-head { padding: 10px 16px; display: flex; gap: 12px; align-items: center; border-bottom: 1px solid var(--border); background: var(--panel); } .chat-head .title { flex: 1; min-width: 0; } .chat-head .name { font-weight: 600; } .chat-head .status { font-size: 12px; color: var(--muted); } .chat-head .status.online { color: var(--ok); } .chat-head .status.offline { color: var(--danger); } /* Полоса разделов группы: чипы «значок + название», непрочитанное точкой. */ .section-bar { display: flex; gap: 6px; padding: 8px 14px; overflow-x: auto; border-bottom: 1px solid var(--border); background: var(--panel); scrollbar-width: thin; } .section-bar .chip { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); color: var(--text); font-size: 13px; cursor: pointer; white-space: nowrap; } .section-bar .chip:hover { border-color: var(--accent); } .section-bar .chip.active { background: var(--accent); border-color: var(--accent); color: #fff; } .section-bar .chip .cnt { background: var(--accent-2); color: #fff; font-size: 11px; border-radius: 9px; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; } .section-bar .chip.active .cnt { background: rgba(255,255,255,.28); } .section-bar .chip.add { color: var(--muted); font-weight: 600; } .icon-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin-bottom: 12px; max-height: 168px; overflow-y: auto; } .icon-grid button { font-size: 19px; line-height: 1; padding: 6px 0; border-radius: 8px; background: var(--bg); border: 1px solid transparent; cursor: pointer; } .icon-grid button.sel { border-color: var(--accent); background: var(--panel); } .messages { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 14% 14px; display: flex; flex-direction: column; gap: 2px; } @media (max-width: 900px) { .messages { padding: 12px 10px; } } .msg { max-width: 72%; padding: 5px 10px; border-radius: 13px; background: var(--bubble-in); align-self: flex-start; word-wrap: break-word; } .msg.out { align-self: flex-end; background: var(--bubble-out); } .msg .text { font-size: 14px; line-height: 1.3; } .msg .text a { color: var(--accent); text-decoration: none; } .msg .text a:hover { text-decoration: underline; } .msg .meta { font-size: 10px; color: var(--muted); margin-top: 1px; text-align: right; } .msg.out .meta .ticks { color: #9fd1ff; } .msg img.att { max-width: 320px; max-height: 320px; border-radius: 10px; display: block; cursor: pointer; } .msg video.att { max-width: 320px; border-radius: 10px; display: block; } .msg audio.att { width: 260px; } /* OG-превью ссылки под текстом сообщения */ .msg .og-card { display: flex; gap: 8px; margin-top: 6px; padding: 6px 8px; max-width: 320px; background: rgba(0,0,0,.15); border-left: 3px solid var(--accent); border-radius: 6px; color: inherit; text-decoration: none; } .msg .og-card:hover { background: rgba(0,0,0,.25); } .msg .og-card img { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; flex: none; } .msg .og-card .og-info { display: block; min-width: 0; overflow: hidden; } .msg .og-card .og-title { display: block; font-size: 13px; font-weight: 600; line-height: 1.25; } .msg .og-card .og-desc { display: block; font-size: 12px; color: var(--muted); line-height: 1.3; max-height: 47px; overflow: hidden; } .msg .og-card .og-site { display: block; font-size: 11px; color: var(--accent); margin-top: 2px; } .msg .file { display: flex; gap: 10px; align-items: center; } .msg .file .fi { width: 38px; height: 38px; border-radius: 8px; background: var(--accent-2); display: grid; place-items: center; flex: none; } .msg .file a { color: inherit; } .day-sep { align-self: center; background: rgba(0,0,0,.3); color: var(--muted); font-size: 12px; padding: 3px 10px; border-radius: 10px; margin: 8px 0; } .typing { color: var(--muted); font-size: 13px; padding: 0 14% 6px; min-height: 18px; } .composer { padding: 10px 14px; display: flex; gap: 10px; align-items: center; border-top: 1px solid var(--border); background: var(--panel); } .composer textarea { flex: 1; resize: none; min-height: 44px; max-height: 140px; padding: 11px 16px; line-height: 20px; border-radius: 22px; background: var(--bg); border: 1px solid var(--border); color: var(--text); outline: none; overflow-y: auto; } .composer textarea:focus { border-color: var(--accent); } .composer .send { background: var(--accent-2); color: #fff; border: none; width: 44px; height: 44px; border-radius: 50%; font-size: 18px; flex: none; } .composer .send:disabled { opacity: .5; } /* ---------- запись голосового ---------- */ .rec-bar { padding: 10px 14px; display: flex; gap: 10px; align-items: center; border-top: 1px solid var(--border); background: var(--panel); } .rec-bar .rec-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--danger); flex: none; animation: rec-blink 1s steps(2, start) infinite; } .rec-bar .rec-time { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); } .rec-bar .rec-hint { flex: 1; color: var(--muted); font-size: 13px; } .rec-bar .send { background: var(--accent-2); color: #fff; border: none; width: 44px; height: 44px; border-radius: 50%; font-size: 18px; flex: none; } @keyframes rec-blink { 0% { opacity: 1; } 100% { opacity: .25; } } /* ---------- эмодзи-панель ---------- */ .emoji-panel { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 14px; max-height: 200px; overflow-y: auto; background: var(--panel); border-top: 1px solid var(--border); } .emoji-panel .emoji { font-size: 24px; line-height: 1; padding: 6px; border-radius: 8px; cursor: pointer; user-select: none; } .emoji-panel .emoji:hover { background: var(--hover); } /* ---------- прогресс загрузки файлов ---------- */ .upload-progress { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--panel); border-top: 1px solid var(--border); } .upload-progress .up-bar { flex: 1; height: 6px; border-radius: 4px; background: var(--hover); overflow: hidden; } .upload-progress .up-fill { height: 100%; width: 0; background: var(--accent-2); transition: width .15s ease; } .upload-progress .up-text { font-size: 12px; color: var(--muted); white-space: nowrap; } .empty { flex: 1; display: grid; place-items: center; color: var(--muted); text-align: center; } /* ---------- QR на скачивание Android-приложения ---------- */ .app-qr { margin-top: 24px; display: inline-flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 16px; background: var(--panel); border: 1px solid var(--border); } .app-qr img { width: 150px; height: 150px; display: block; background: #fff; padding: 8px; border-radius: 10px; } .app-qr .app-qr-text strong { color: var(--text); font-size: 14px; } .app-qr .app-qr-text span { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; } .app-qr .app-qr-text a { display: inline-block; margin-top: 6px; font-size: 12px; } /* ---------- админ-формы (создание/редактирование пользователя) ---------- */ .aform label { display: block; margin: 10px 0 4px; color: var(--muted); font-size: 13px; } .aform input, .aform select, .aform textarea { width: 100%; max-width: 440px; padding: 9px 12px; border-radius: 8px; background: var(--bg); border: 1px solid var(--border); color: var(--text); outline: none; } .aform input:focus, .aform select:focus, .aform textarea:focus { border-color: var(--accent); } .aform .check { display: flex; align-items: center; gap: 8px; margin-top: 10px; max-width: 440px; } .aform .check input { width: auto; } /* ---------- call overlay ---------- */ .call-overlay { position: fixed; inset: 0; background: rgba(8,12,18,.96); z-index: 2000; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 18px; } .call-overlay.show { display: flex; } .call-videos { position: relative; width: min(900px, 94vw); height: min(64vh, 620px); background: #000; border-radius: 16px; overflow: hidden; } .call-videos video { width: 100%; height: 100%; object-fit: cover; } .call-videos .local { position: absolute; right: 14px; bottom: 14px; width: 180px; height: 120px; border-radius: 10px; border: 2px solid rgba(255,255,255,.2); object-fit: cover; background: #111; } .call-info { text-align: center; } .call-info .who { font-size: 20px; font-weight: 600; } .call-info .state { color: var(--muted); } .call-btns { display: flex; gap: 16px; } .call-btns button { width: 60px; height: 60px; border-radius: 50%; border: none; font-size: 22px; color: #fff; background: var(--panel-2); } .call-btns .hangup { background: var(--danger); } .call-btns .accept { background: var(--ok); } .call-btns.toggled { background: #fff; } .call-btns button.muted { background: #fff; color: #111; } .hidden { display: none !important; } /* ---------- group modal ---------- */ .modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 1500; display: none; place-items: center; } .modal.show { display: grid; } .modal-card { width: min(420px, 94vw); background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 20px; } .modal-card h3 { margin: 0 0 14px; } .modal-card input { width: 100%; padding: 11px 13px; margin-bottom: 10px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); color: var(--text); outline: none; } .group-results { max-height: 180px; overflow-y: auto; } .group-results .gr { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; cursor: pointer; } .group-results .gr:hover { background: var(--hover); } /* список участников группы: строки в столбик, ник тянется, ✕ прижат вправо */ #members-list { flex-direction: column; } #members-list .gr { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 4px; } #members-list .gr .nick { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .member-remove { color: var(--danger); cursor: pointer; flex: none; padding: 2px 8px; font-size: 15px; border-radius: 6px; } .member-remove:hover { background: var(--hover); } .group-selected { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } .chip { background: var(--bubble-out); border-radius: 14px; padding: 4px 10px; font-size: 13px; display: flex; gap: 6px; align-items: center; } .chip .x { cursor: pointer; color: var(--muted); } .modal-actions { display: flex; gap: 10px; margin-top: 12px; } .modal-actions .btn { flex: 1; } /* ---------- lightbox ---------- */ .lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 2500; display: none; align-items: center; justify-content: center; } .lightbox.show { display: flex; } .lb-inner { max-width: 94vw; max-height: 90vh; } .lb-inner img, .lb-inner video { max-width: 94vw; max-height: 90vh; border-radius: 8px; } .lb-close { position: fixed; top: 16px; right: 20px; color: #fff; font-size: 30px; cursor: pointer; z-index: 2600; } .lb-save { position: fixed; top: 20px; left: 20px; color: #fff; background: var(--accent); padding: 8px 16px; border-radius: 8px; font-size: 14px; z-index: 2600; } /* ---------- edit/delete + read ticks ---------- */ .msg .meta .edited { font-style: italic; margin-right: 4px; } .msg .text.deleted { font-style: italic; color: var(--muted); } .edit-bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; background: var(--panel-2); color: var(--muted); font-size: 13px; border-top: 1px solid var(--border); } .edit-bar .x { cursor: pointer; } .msg-menu { position: fixed; z-index: 1800; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; box-shadow: 0 6px 24px rgba(0,0,0,.5); } .msg-menu button { display: block; width: 100%; text-align: left; padding: 10px 18px; background: transparent; border: none; color: var(--text); } .msg-menu button:hover { background: var(--hover); } #mm-delete { color: var(--danger); } /* ---------- group bits ---------- */ .avatar.group { background: linear-gradient(135deg, #4dba87, #2b9ae8); } .msg .sender { font-size: 12px; font-weight: 600; color: #6fb6ff; margin-bottom: 2px; } .msg img.att, .msg video.att { cursor: pointer; } /* ---------- video poster + play ---------- */ .video-thumb { position: relative; display: inline-block; cursor: pointer; border-radius: 10px; overflow: hidden; background: #000; min-width: 180px; min-height: 130px; } .video-thumb img { display: block; max-width: 320px; max-height: 320px; } .video-thumb .play { position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; } /* ---------- download page: фоновая работа ---------- */ .bg-help { text-align: left; margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; } .bg-help summary { color: var(--accent); cursor: pointer; font-weight: 600; list-style: none; } .bg-help summary::-webkit-details-marker { display: none; } .bg-help .body { color: var(--muted); font-size: 14px; margin-top: 10px; } .bg-help h4 { color: var(--text); margin: 12px 0 2px; font-size: 14px; } .bg-help ul { padding-left: 18px; margin: 4px 0; } /* ---------- admin ---------- */ .admin { max-width: 1000px; margin: 0 auto; padding: 24px; } .admin h1 { font-size: 22px; } .admin-nav { display: flex; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; } .admin-nav a { padding: 8px 14px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; color: var(--text); } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 12px; margin-bottom: 24px; } .card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 16px; } .card .num { font-size: 28px; font-weight: 700; } .card .lbl { color: var(--muted); font-size: 13px; } table.tbl { width: 100%; border-collapse: collapse; background: var(--panel); border-radius: 12px; overflow: hidden; } table.tbl th, table.tbl td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); } table.tbl th { color: var(--muted); font-weight: 600; font-size: 13px; } .btn-sm { padding: 6px 12px; border-radius: 8px; border: none; color: #fff; font-size: 13px; } .btn-sm.ok { background: var(--ok); } .btn-sm.no { background: var(--danger); } .btn-sm.gray { background: var(--panel-2); } .inline { display: inline; } .tag { font-size: 12px; padding: 2px 8px; border-radius: 8px; background: var(--panel-2); } .tag.ok { background: rgba(77,186,135,.2); color: var(--ok); } .tag.no { background: rgba(232,83,79,.2); color: var(--danger); } /* Страница ссылки-приглашения /i/<код>. */ .invite-icon { font-size: 44px; line-height: 1; text-align: center; margin-bottom: 6px; } .invite-qr { margin: 18px auto 10px; max-width: 190px; } .invite-qr svg { width: 100%; height: auto; background: #fff; border-radius: 10px; padding: 8px; box-sizing: border-box; } .invite-link { width: 100%; padding: 9px 11px; border-radius: 9px; background: var(--bg); border: 1px solid var(--border); color: var(--muted); font-size: 12px; text-align: center; } .hint { color: var(--muted); font-size: 13px; margin: 0 0 10px; } /* ---------- аватары ---------- */ /* Один класс на все места показа: фото, значок из набора или буква имени. */ .ava { width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-weight: 600; position: relative; background-color: #4f5bd5; font-size: 17px; text-decoration: none; background-size: cover; background-position: center; overflow: visible; } .ava.c-indigo { background-color: #4f5bd5; } .ava.c-blue { background-color: #2b7fd8; } .ava.c-teal { background-color: #21908d; } .ava.c-green { background-color: #3d9a5c; } .ava.c-amber { background-color: #b98218; } .ava.c-orange { background-color: #c26a25; } .ava.c-red { background-color: #bd4340; } .ava.c-violet { background-color: #7d4bc4; } .ava.photo { background-color: transparent; color: transparent; } .ava.emoji { font-size: 22px; font-weight: 400; } .ava.group { background: linear-gradient(135deg, #2b9ae8, #6b5be8); } .ava.big { width: 96px; height: 96px; font-size: 38px; } .ava.big.emoji { font-size: 46px; } /* Аватар слева от любого сообщения — и у чужих, и у своих. */ .msg-row { display: flex; align-items: flex-end; gap: 8px; max-width: 100%; } .msg-row.out { justify-content: flex-end; } .msg-row .msg { align-self: flex-end; max-width: none; } .ava.msg-ava { width: 48px; height: 48px; font-size: 20px; align-self: flex-end; margin-bottom: 2px; cursor: pointer; } .ava.msg-ava.emoji { font-size: 24px; } /* Выбор аватара в профиле. */ .ava-row { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; } .ava-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin-bottom: 10px; max-height: 190px; overflow-y: auto; } .ava-grid button { font-size: 20px; line-height: 1; padding: 6px 0; border-radius: 8px; background: var(--bg); border: 1px solid transparent; cursor: pointer; } .ava-grid button.sel { border-color: var(--accent); background: var(--panel); } .color-row { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; } .color-row button { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; } .color-row button.sel { border-color: var(--text); } /* Обрезка фото. */ .crop-back { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 1600; display: grid; place-items: center; } .crop-card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 20px; } .crop-card h3 { margin: 0 0 14px; } .crop-stage { position: relative; width: 260px; height: 260px; margin: 0 auto 12px; background: #000; border-radius: 10px; overflow: hidden; touch-action: none; cursor: grab; } .crop-stage canvas { display: block; } .crop-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgba(0,0,0,.45); pointer-events: none; } .crop-zoom { width: 100%; margin-bottom: 4px; }