:root{ --dark:#0D2A3F; --accent:#0EA5C6; --accent2:#0B7EA6; --green:#0BB783; --text:#0F172A; --muted:#64748B; --border:#E2E8F0; --bg:#F7FAFC; --card:#FFFFFF; --danger:#EF4444; --shadow: 0 10px 28px rgba(2,8,23,.06); --shadow2: 0 18px 46px rgba(2,8,23,.10); /* iOS (PWA) safe-area insets */ --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --label: rgba(15,23,42,.88); --input-bg: rgba(255,255,255,.96); --input-border: rgba(209,213,219,.95); --glass: rgba(255,255,255,.72); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--text); background: radial-gradient(1200px 500px at 10% 0%, rgba(14,165,198,.08), rgba(14,165,198,0) 55%), radial-gradient(900px 480px at 95% 15%, rgba(11,183,131,.06), rgba(11,183,131,0) 55%), var(--bg); min-height:100vh; } img{display:block;max-width:100%} a{text-decoration:none;color:inherit} .wrap{ width:100%; max-width:1280px; margin:0 auto; padding-left: calc(28px + var(--safe-left)); padding-right: calc(28px + var(--safe-right)); } .muted{color:var(--muted)} .muted2{color:var(--muted);opacity:.92} .hidden{display:none!important} /* ===== Page modifiers ===== */ body.search-page{ /* цвет/градиент под фон fon.jpg (тёмный фирменный) */ background: radial-gradient(1200px 560px at 12% 0%, rgba(14,165,198,.18), rgba(14,165,198,0) 60%), radial-gradient(980px 620px at 92% 18%, rgba(11,183,131,.12), rgba(11,183,131,0) 58%), linear-gradient(180deg, #0F374C 0%, #0D2A3F 100%); } body.search-page .page-head .page-title h1{color:rgba(255,255,255,.96)} body.search-page .page-head .page-title p{color:rgba(255,255,255,.74)} /* ===== Header (как на главной) ===== */ header{ position:fixed;top:0;left:0;right:0;z-index:1000; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); overflow:hidden; } /* iOS/Android PWA (added to Home Screen): keep UI below system status bar */ @media (display-mode: standalone){ header{ padding-top: var(--safe-top); } main.page{ padding-top: calc(112px + var(--safe-top)); } .toast{ right: calc(16px + var(--safe-right)); bottom: calc(16px + var(--safe-bottom)); } } /* Fallback for iOS Safari: buckler-core.js adds .pwa-standalone on */ html.pwa-standalone header{ padding-top: var(--safe-top); } html.pwa-standalone main.page{ padding-top: calc(112px + var(--safe-top)); } html.pwa-standalone .toast{ right: calc(16px + var(--safe-right)); bottom: calc(16px + var(--safe-bottom)); } header::before{ content:""; position:absolute; inset:-20px; background:url("images/hero.png") center/cover no-repeat; filter: blur(10px) saturate(1.05); opacity:.18; z-index:0; pointer-events:none; } header::after{ content:""; position:absolute; inset:0; background:rgba(255,255,255,.78); z-index:0; pointer-events:none; } .header-shell{ position:relative;z-index:1; width:100%; padding:14px 28px; padding-left: calc(28px + var(--safe-left)); padding-right: calc(28px + var(--safe-right)); display:flex;align-items:center;gap:18px; } .logo{ display:flex;align-items:center;gap:10px; font-size:22px;font-weight:800;letter-spacing:.2px; line-height:1;white-space:nowrap; } .logo:hover{opacity:.95} .logo-img{ width:34px;height:34px;border-radius:12px;object-fit:contain; background:var(--card); box-shadow:0 10px 24px rgba(2,8,23,.16); flex:0 0 auto; } .header-spacer{margin-left:auto} .nav-links{display:flex;gap:8px;align-items:center;font-size:14px;color:rgba(15,23,42,.78);white-space:nowrap;margin-right:6px} .nav-links a{padding:8px 10px;border-radius:10px;transition:.18s} .nav-links a:hover{background:rgba(15,23,42,.06);color:rgba(15,23,42,.95)} .header-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end} .btn-small{ display:inline-flex;align-items:center;justify-content:center; padding:9px 14px;border-radius:11px; border:1px solid #0b2a3f2b; background:var(--card);color:#0F172A; font-weight:600;font-size:13px; cursor:pointer; transition:.18s transform,.18s box-shadow,.18s background,.18s color; white-space:nowrap; } .btn-small:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(2,8,23,.08)} .btn-small.primary{ border-color:transparent; background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; box-shadow:0 12px 26px rgba(14,165,198,.25); } .btn-small.primary:hover{box-shadow:0 16px 34px rgba(14,165,198,.32)} /* Мягкие варианты кнопок (строгий стиль, минимум цветов) */ .btn-small.soft{ border-color:rgba(14,165,198,.28); background:rgba(14,165,198,.10); color:rgba(14,165,198,1); box-shadow:none; } .btn-small.soft:hover{box-shadow:0 10px 24px rgba(2,8,23,.08)} .btn-small.success{ border-color:rgba(11,183,131,.30); background:rgba(11,183,131,.10); color:rgba(11,183,131,1); box-shadow:none; } .btn-small.success:hover{box-shadow:0 10px 24px rgba(2,8,23,.08)} .btn-small.ghost{ background:transparent; border-color:rgba(15,23,42,.18); color:rgba(15,23,42,.92); box-shadow:none; } .btn-small.ghost:hover{background:rgba(15,23,42,.04)} .btn-small.danger{ border-color:transparent; background:linear-gradient(135deg,#ef4444,#b91c1c); color:#fff; box-shadow:0 12px 26px rgba(239,68,68,.22); } /* ===== Page ===== */ main.page{padding:112px 0 64px} .page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px} .page-title h1{font-size:34px;line-height:1.12;font-weight:900;letter-spacing:.2px;margin-bottom:8px} .page-title p{color:var(--muted);font-size:14.5px;line-height:1.55;max-width:860px} .card{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:18px; box-shadow: var(--shadow); } .card h3{font-size:16px;font-weight:900;margin-bottom:10px} .grid{display:grid;gap:16px} .grid.two{grid-template-columns:1fr 1fr} .grid.three{grid-template-columns:repeat(3,1fr)} .grid.four{grid-template-columns:repeat(4,1fr)} @media (max-width: 980px){ .nav-links{display:none} .grid.two,.grid.three,.grid.four{grid-template-columns:1fr} .wrap{padding-left: calc(14px + var(--safe-left)); padding-right: calc(14px + var(--safe-right));} /* Prevent iOS auto-zoom on focus (inputs < 16px trigger page zoom). */ .input,.select,.textarea, input,select,textarea{ font-size:16px !important; } } /* ===== Device detected (JS adds .device-mobile / .device-desktop on ) ===== Эти правила дополняют обычные @media и помогают "подстраивать" интерфейс на устройствах, где ширина/масштаб ведут себя нестандартно. */ .device-mobile .header-shell{ padding:12px 14px; padding-left: calc(14px + var(--safe-left)); padding-right: calc(14px + var(--safe-right)); } .device-mobile .page{padding-left:14px;padding-right:14px} .device-mobile .dash{grid-template-columns:1fr;gap:12px} .device-mobile .dash-nav{position:static} .device-mobile .dash-main{padding-top:0} .device-mobile .grid-3{grid-template-columns:1fr} .device-mobile .grid.two{grid-template-columns:1fr} .device-mobile .chat-layout{grid-template-columns:1fr} .device-mobile .chat-side{position:static} @media (max-width: 720px){ .header-shell{ gap:10px; padding:12px 14px; padding-left:calc(14px + var(--safe-left)); padding-right:calc(14px + var(--safe-right)); } .logo{font-size:18px;gap:8px;min-width:0;} .logo-img{width:30px;height:30px;border-radius:10px;} .header-spacer{flex:1 1 auto;min-width:0;} .header-actions{ flex-wrap:nowrap; gap:8px; min-width:0; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .header-actions::-webkit-scrollbar{display:none;} .header-actions > *{flex:0 0 auto;} .btn-small{padding:8px 12px;font-size:12px;border-radius:10px;} } /* ===== Form ===== */ .form-row{display:grid;gap:10px} .label{font-weight:800;font-size:13px;color:var(--label);margin-bottom:6px} .input,.select,.textarea{ width:100%; padding:11px 12px; border-radius:12px; border:1px solid var(--input-border); background:var(--input-bg); font-size:14px; color:var(--text); outline:none; box-shadow: inset 0 1px 0 rgba(255,255,255,.65); } .textarea{min-height:120px;resize:vertical} .input:focus,.select:focus,.textarea:focus{ border-color:rgba(14,165,198,.72); box-shadow:0 0 0 3px rgba(14,165,198,.18); } /* ===== Dashboard layout ===== */ .dash{ display:grid; grid-template-columns: 280px 1fr; gap:16px; align-items:start; } .side{ position:sticky; top:96px; display:flex; flex-direction:column; gap:10px; } .side .card{padding:14px} .side-title{font-weight:900;margin-bottom:10px} .side a{ display:flex;gap:12px;align-items:center; padding:10px 12px;border-radius:14px; border:1px solid transparent; color:rgba(15,23,42,.85); font-weight:900; transition:.16s; } .side a:hover{background:rgba(15,23,42,.05)} .side a.active{ background:rgba(14,165,198,.08); border-color:rgba(14,165,198,.20); } /* Деловые однотонные иконки в боковом меню (как в примере) */ .side a .nav-ico{ width:34px;height:34px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--border); background:var(--card); color:rgba(15,23,42,.65); flex:0 0 34px; } .side a .nav-ico svg{ width:18px;height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .side a.active .nav-ico{ background:rgba(14,165,198,.15); border-color:rgba(14,165,198,.35); color:rgba(14,165,198,1); } .side a.active-urgent{ background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.22); } .side a.active-urgent .nav-ico{ background:rgba(239,68,68,.15); border-color:rgba(239,68,68,.35); color:rgba(239,68,68,1); } /* Support button in side navigation (голубой, как на главной) */ .side a.support-link{ margin-top:6px; background:linear-gradient(135deg,var(--accent),var(--accent2)); border-color:transparent; color:#fff; box-shadow:0 12px 26px rgba(14,165,198,.22); } .side a.support-link:hover{ transform:translateY(-1px); box-shadow:0 16px 34px rgba(14,165,198,.28); } .side a.support-link .nav-ico{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.24); color:#fff; } .side a.support-link .nav-ico svg{ stroke:#fff; } /* Logout block (cabinets): separated from main tabs, pinned to bottom */ .side .card.logout-card{ margin-top:auto; border-color:rgba(239,68,68,.20); background:rgba(239,68,68,.03); } .side a.logout-link{ background:rgba(239,68,68,.06); border-color:rgba(239,68,68,.20); /* Always red (both light & dark themes) */ color: var(--danger); font-weight: 900;} .side a.logout-link:hover{ background:rgba(239,68,68,.10); color: var(--danger);} .side a.logout-link .nav-ico{ background:rgba(239,68,68,.15); border-color:rgba(239,68,68,.35); color:rgba(239,68,68,1); } @media (max-width: 980px){ .dash{grid-template-columns:1fr} .side{position:static;top:auto} } /* ===== Badges & tags ===== */ .badge{ display:inline-flex;align-items:center;gap:8px; padding:7px 10px;border-radius:999px; border:1px solid var(--border); background:var(--card); font-weight:800;font-size:12.5px; } .badge.green{border-color:rgba(11,183,131,.30);background:rgba(11,183,131,.08)} .badge.blue{border-color:rgba(14,165,198,.30);background:rgba(14,165,198,.08)} .badge.red{border-color:rgba(239,68,68,.30);background:rgba(239,68,68,.08)} .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px} .tag{ display:inline-flex;align-items:center; padding:6px 10px;border-radius:999px; border:1px solid var(--border); background:var(--card); font-size:12.5px;font-weight:800; color:rgba(15,23,42,.80); } /* ===== Master cards ===== */ .master-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch} @media (max-width: 1020px){.master-grid{grid-template-columns:repeat(2,minmax(0,1fr));}} @media (max-width: 760px){.master-grid{grid-template-columns:1fr;}} .master-card{overflow:hidden;padding:0;display:flex;flex-direction:column;content-visibility:auto;contain-intrinsic-size:380px 420px} .master-grid > .master-card:not(.favorite-master-card){height:470px;max-height:470px;min-height:470px;} .master-grid > .master-card:not(.favorite-master-card) .master-body{height:100%;display:flex;flex-direction:column;min-width:0;} .master-grid > .master-card:not(.favorite-master-card) .master-name, .master-grid > .master-card:not(.favorite-master-card) .master-meta, .master-grid > .master-card:not(.favorite-master-card) .spec-text{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;} .master-grid > .master-card:not(.favorite-master-card) .master-name{-webkit-line-clamp:2;} .master-grid > .master-card:not(.favorite-master-card) .master-meta, .master-grid > .master-card:not(.favorite-master-card) .spec-text{-webkit-line-clamp:3;} .master-grid > .master-card:not(.favorite-master-card) .tags{max-height:76px;overflow:hidden;} .master-grid > .master-card:not(.favorite-master-card) .master-actions{margin-top:auto;} @media (max-width: 760px){ .master-grid > .master-card:not(.favorite-master-card){height:auto;max-height:none;min-height:430px;} } /* шапка портфолио в поиске (сжатая) */ .master-cover{height:120px;background:#e5e7eb;background-size:cover;background-position:center} .master-body{padding:16px;display:flex;flex-direction:column;flex:1} .master-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start} .master-name{font-weight:1000;font-size:16px} .master-meta{color:var(--muted);font-size:13.5px;line-height:1.45} .master-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:auto; /* прижимаем к низу карточки */ padding-top:14px; justify-content:flex-end; /* кнопка «Написать» уходит вправо */ align-items:flex-end; } .icon-btn{ width:40px;height:40px;border-radius:12px; border:1px solid var(--border);background:var(--card); cursor:pointer; display:inline-flex;align-items:center;justify-content:center; position:relative;overflow:hidden; transition:transform .18s ease, box-shadow .18s ease, background .22s ease, border-color .22s ease, color .22s ease; } .icon-btn svg{transition:transform .22s ease;} .icon-btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(2,8,23,.08)} .icon-btn.active{ border-color:transparent; background:linear-gradient(135deg, rgba(255,107,135,.98), rgba(255,142,83,.95)); color:#fff; box-shadow:0 16px 30px rgba(255,107,135,.26); animation:favoriteIconPulse .45s ease; } .icon-btn.active svg{transform:scale(1.1);} @keyframes favoriteIconPulse{ 0%{transform:scale(1)} 45%{transform:scale(1.09)} 100%{transform:scale(1)} } /* ===== Chat ===== */ .chat-layout{display:grid;grid-template-columns:320px 1fr;gap:12px} @media (max-width: 980px){.chat-layout{grid-template-columns:1fr}} .chat-list{padding:0;overflow:hidden} .chat-item{ padding:14px 14px; border-top:1px solid var(--border); cursor:pointer; transition:.15s; } .chat-item:hover{background:rgba(15,23,42,.03)} .chat-item.active{background:rgba(14,165,198,.07)} .chat-item .t{font-weight:900} .chat-item .s{margin-top:4px;color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .chat-thread{display:flex;flex-direction:column;min-height:560px} .chat-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:10px} .chat-messages{ flex:1; border:1px solid var(--border); border-radius:14px; padding:12px; background:var(--card); overflow:auto; } .msg{max-width:78%;padding:10px 12px;border-radius:14px;margin:8px 0;box-shadow:0 10px 24px rgba(2,8,23,.04)} .msg.me{margin-left:auto;background:rgba(14,165,198,.10);border:1px solid rgba(14,165,198,.18)} .msg.other{margin-right:auto;background:var(--card);border:1px solid var(--border)} .msg .meta{margin-top:6px;font-size:12px;color:var(--muted)} .chat-send{display:flex;gap:10px;margin-top:10px} .chat-send .input{flex:1} /* Chat helpers (используются также в окне техподдержки) */ .msg .text{white-space:pre-wrap} .msg.system{ max-width:100%; margin-left:auto; margin-right:auto; text-align:center; background:rgba(15,23,42,.03); border:1px dashed rgba(15,23,42,.20); } .mini-note{font-size:12.5px;color:var(--muted);line-height:1.45} /* ===== Modal ===== */ .modal-overlay{ position:fixed;inset:0; display:none; align-items:center; justify-content:center; background:rgba(2,8,23,.60); backdrop-filter:blur(6px); z-index:3000; padding:16px; } .modal{ width:640px;max-width:96vw; background:var(--card);border-radius:18px; border:1px solid rgba(255,255,255,.6); box-shadow:0 26px 70px rgba(2,8,23,.38); padding:16px; position:relative; } .modal .x{ position:absolute;top:10px;right:10px; width:36px;height:36px;border-radius:12px; border:1px solid var(--border);background:var(--card); cursor:pointer;font-size:18px; } .modal h3{font-weight:1000;margin-bottom:10px} .modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px;flex-wrap:wrap} /* ===== Pro image editor ===== */ .pro-img-editor-modal{width:820px;max-width:96vw} .pro-editor-stage{display:flex;justify-content:center} .pro-editor-frame{ border:1px solid var(--border); border-radius:16px; overflow:hidden; background:rgba(15,23,42,.04); } .pro-editor-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media (max-width: 760px){.pro-editor-controls{grid-template-columns:1fr}} .pro-ctrl{ border:1px solid var(--border); border-radius:16px; padding:10px; background:var(--card); } .range{width:100%;accent-color:var(--accent)} /* ===== Lightbox ===== */ .lightbox-modal{ width:auto; max-width:92vw; max-height:92vh; background:transparent; border:none; box-shadow:none; padding:0; } .lightbox-modal img{ max-width:92vw; max-height:86vh; border-radius:18px; border:1px solid rgba(255,255,255,.55); box-shadow:0 26px 70px rgba(2,8,23,.38); background:var(--card); } img[data-full]{cursor:zoom-in} /* Support modal */ .support-modal{width:720px;max-width:96vw} .support-thread{display:flex;flex-direction:column;min-height:420px} /* ===== Toast ===== */ .toast{ position:fixed;right:16px;bottom:16px; background:var(--card);border:1px solid var(--border); box-shadow:0 18px 46px rgba(2,8,23,.12); border-radius:14px; padding:12px 14px; z-index:3500; display:none; max-width:360px; } .toast.show{ display:block; animation:toastIn .18s ease-out; } .toast-card{ } .toast-title{font-weight:1000} .toast-text{margin-top:6px;color:var(--muted);font-size:13px;line-height:1.45} @keyframes toastIn{ from{transform:translateY(8px);opacity:0} to{transform:none;opacity:1} } .toast strong{display:block;margin-bottom:4px} /* ===== Admin / Stats ===== */ .kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} @media (max-width: 980px){.kpi-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width: 560px){.kpi-grid{grid-template-columns:1fr}} .kpi{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:14px; box-shadow: var(--shadow); } .kpi .k{color:var(--muted);font-size:12.5px} .kpi .v{font-weight:1000;font-size:24px;margin-top:6px} /* Stats (master cabinet): period controls */ .stats-range-controls{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end} .stats-range-controls .stats-range-grid{flex:1 1 320px} .stats-range-controls .stats-range-actions{ flex:1 1 320px; display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end; justify-content:flex-start; min-width:0; } .stats-range-controls .stats-range-actions .btn-small{flex:0 0 auto} @media (max-width: 860px){ .stats-range-controls .stats-range-grid{max-width:none !important;width:100%} .stats-range-controls .stats-range-actions{width:100%;margin-top:0 !important} } @media (max-width: 560px){ .stats-range-controls{gap:10px} .stats-range-controls .stats-range-actions{width:100%} .chart-canvas{height:200px} } /* ===== Files ===== */ .file-list{display:grid;gap:10px} .file-item{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; padding:12px; border:1px solid var(--border); border-radius:14px; background:var(--card); } .file-item .name{font-weight:900} .file-item .meta{margin-top:6px;color:var(--muted);font-size:12.5px;line-height:1.35} .file-item .actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end} /* ===== Milestones / stages ===== */ .stage-list{display:grid;gap:10px} .stage-item{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; padding:12px; border:1px solid var(--border); border-radius:14px; background:var(--card); } .stage-title{font-weight:1000} .stage-sub{margin-top:6px;color:var(--muted);font-size:12.5px;line-height:1.35} .stage-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end} /* ===== Clickable cards ===== */ .card.clickable{cursor:pointer} .card.clickable:hover{transform:translateY(-2px);box-shadow: var(--shadow2)} /* ===== Logo (transparent with site glow) ===== */ .logo-img{ background:transparent !important; box-shadow:none !important; filter: drop-shadow(0 12px 22px rgba(14,165,198,.28)) drop-shadow(0 8px 16px rgba(11,183,131,.18)); } /* ===== Charts ===== */ .chart-wrap{ border:1px solid var(--border); border-radius:16px; background:var(--card); padding:12px; } .chart-canvas{width:100%;height:240px;display:block;} .chart-legend{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px} .legend-item{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);font-weight:800} .legend-swatch{width:10px;height:10px;border-radius:3px;background:var(--accent)} .rating-summary-shell{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;padding:18px 20px;border:1px solid rgba(14,165,198,.14);border-radius:20px;background:linear-gradient(135deg,rgba(14,165,198,.08),rgba(255,255,255,.98));box-shadow:0 14px 32px rgba(2,8,23,.06)} .rating-summary-main{display:grid;gap:10px;min-width:0} .rating-summary{display:grid;gap:8px} .rating-summary-score{display:inline-flex;align-items:center;gap:12px;font-weight:1000;font-size:32px;line-height:1;color:var(--text)} .rating-summary-score svg{color:#F59E0B;flex:0 0 auto} .rating-summary-stars{display:inline-flex;align-items:center;gap:8px;flex-wrap:nowrap;padding:10px 14px;border-radius:999px;background:rgba(245,158,11,.10);border:1px solid rgba(245,158,11,.18);width:max-content;max-width:100%} .rating-summary-stars .star,.review-stars .star{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;font-size:18px;line-height:1;color:rgba(148,163,184,.42);transform:translateY(-.5px)} .rating-summary-stars .star.filled,.review-stars .star.filled{color:#F59E0B;text-shadow:0 6px 16px rgba(245,158,11,.22)} .rating-summary-count{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:13px;font-weight:800} .rating-summary-count b{display:inline-flex;align-items:center;justify-content:center;min-width:36px;padding:7px 11px;border-radius:999px;background:rgba(14,165,198,.10);border:1px solid rgba(14,165,198,.18);color:#0B7EA6;font-weight:1000;line-height:1} .review-card{display:grid;gap:12px;padding:16px 18px;border:1px solid rgba(226,232,240,.95);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,250,252,.96));box-shadow:0 12px 28px rgba(2,8,23,.05)} .review-head{display:flex;justify-content:space-between;gap:14px;align-items:center;flex-wrap:wrap} .review-author{font-weight:900;font-size:15px;line-height:1.25;color:var(--text)} .review-stars{display:inline-flex;align-items:center;gap:6px;flex-wrap:nowrap;padding:8px 12px;border-radius:999px;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.14)} .review-stars .score{margin-left:6px;font-size:12px;font-weight:900;color:var(--muted);line-height:1} .review-text{line-height:1.65;color:var(--text);overflow-wrap:anywhere} .review-date{font-size:12px;color:var(--muted);font-weight:800} html[data-theme="dark"] .rating-summary-shell{background:linear-gradient(135deg,rgba(14,165,198,.12),rgba(24,35,46,.98));border-color:rgba(85,203,224,.16);box-shadow:0 16px 34px rgba(0,0,0,.24)} html[data-theme="dark"] .rating-summary-count b{background:rgba(130,220,237,.10);border-color:rgba(130,220,237,.18);color:#82dced} html[data-theme="dark"] .review-card{background:linear-gradient(180deg,rgba(22,31,41,.98),rgba(19,27,36,.98));border-color:rgba(65,85,101,.42);box-shadow:0 18px 32px rgba(0,0,0,.24)} html[data-theme="dark"] .review-stars{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.22)} @media (max-width: 640px){ .rating-summary-shell{grid-template-columns:1fr;padding:14px 16px} .rating-summary-score{font-size:26px} .rating-summary-stars,.review-stars{flex-wrap:wrap} .review-card{padding:14px 15px} } /* ===== Master avatar in search cards ===== */ .master-head{display:flex;gap:12px;align-items:flex-start} .master-avatar{ width:46px;height:46px; border-radius:16px; overflow:hidden; border:1px solid rgba(226,232,240,.95); background:rgba(15,23,42,.04); flex:0 0 auto; display:flex;align-items:center;justify-content:center; font-weight:1000; color:rgba(15,23,42,.55); } .master-avatar img{width:100%;height:100%;object-fit:cover} /* ===== Chat: stages panel on the right ===== */ .chat-split{ display:grid; grid-template-columns: 1fr 360px; gap:12px; align-items:start; } .chat-split.no-stages{grid-template-columns:1fr;} /* Mobile overflow fixes for the safe-deal chat blocks ("Этапы" / "Документы"). */ .chat-page .chat-split, .chat-page .chat-split > *{min-width:0;} .chat-page .chat-messages{overflow-x:hidden;} .chat-page .file-item .name, .chat-page .stage-name{overflow-wrap:anywhere;word-break:break-word;} .chat-page .msg .text{overflow-wrap:break-word;word-break:normal;hyphens:none;} @media (max-width: 560px){ .chat-page .file-item{flex-wrap:wrap;} .chat-page .file-item .actions{width:100%;justify-content:flex-start;} .chat-page .stage-row{flex-wrap:wrap;} } /* Support panel split (список чатов + переписка) */ .support-split{ display:grid; grid-template-columns: 360px 1fr; gap:12px; align-items:start; } @media (max-width: 980px){ .support-split{grid-template-columns:1fr;} } .support-list{ padding:0; overflow:hidden; } /* Header inside the support list cards should align with list items */ .support-list .chat-head{ padding:14px 14px 10px 14px; margin-bottom:0; border-bottom:1px solid var(--border); } .support-list .support-chat-item:first-child{border-top:0;} .support-chat-item{ padding:14px 14px; border-top:1px solid var(--border); cursor:pointer; transition:.15s; } .support-chat-item:hover{background:rgba(15,23,42,.03)} .support-chat-item.active{background:rgba(14,165,198,.07)} .support-chat-item .t{font-weight:900;display:flex;gap:8px;align-items:center;justify-content:space-between} .support-chat-item .s{margin-top:4px;color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .support-pill{ display:inline-flex;align-items:center;gap:6px; padding:4px 8px;border-radius:999px; font-size:12px;font-weight:900; border:1px solid var(--border); background:var(--card); color:rgba(15,23,42,.85); } .support-pill.urgent{ border-color:rgba(239,68,68,.35); background:rgba(239,68,68,.08); color:rgba(239,68,68,1); } @media (max-width: 980px){ .chat-split{grid-template-columns:1fr;} } .stages-panel{position:sticky;top:96px;} @media (max-width: 980px){ .stages-panel{position:static;top:auto} } .stage-timeline{display:grid;gap:10px;margin-top:12px} .stage-step{display:grid;grid-template-columns:32px 1fr;gap:10px;align-items:flex-start} .stage-bullet{ width:32px;height:32px;border-radius:12px; display:flex;align-items:center;justify-content:center; background:rgba(14,165,198,.10); border:1px solid rgba(14,165,198,.22); color:rgba(13,42,63,.92); font-weight:1000; } .stage-card{ border:1px solid var(--border); border-radius:16px; background:var(--card); padding:12px; position:relative; overflow:hidden; } .stage-card::before{ content:""; position:absolute;left:-1px;top:-1px;bottom:-1px; width:6px; background:linear-gradient(180deg,var(--accent),var(--green)); } .stage-row{display:flex;justify-content:space-between;gap:10px;align-items:flex-start} .stage-name{font-weight:1000} .stage-price{font-weight:1000;white-space:nowrap} .stage-state{margin-top:6px;color:var(--muted);font-size:12.5px;line-height:1.35} .stage-cta{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px} /* ===== Avatar uploader ===== */ .avatar-upload{ display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start; } .avatar-preview{ width:72px;height:72px;border-radius:22px; border:1px solid rgba(226,232,240,.95); background:rgba(15,23,42,.04); overflow:hidden; display:flex;align-items:center;justify-content:center; font-weight:1000;color:rgba(15,23,42,.55); } .avatar-preview img{width:100%;height:100%;object-fit:cover} /* ===== Inline icons (деловой стиль) ===== */ .txt-ico{ display:inline-flex; align-items:center; justify-content:center; width:1.05em; height:1.05em; vertical-align:-0.15em; margin:0 2px; } .txt-ico svg{ width:1.05em; height:1.05em; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .icon-btn svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } /* ===== Pills (рейтинг/цена/город) ===== */ .master-meta-row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:6px; } .pill{ display:inline-flex; align-items:center; gap:8px; padding:8px 11px; border-radius:14px; border:1px solid var(--border); background:rgba(255,255,255,.94); box-shadow:0 10px 24px rgba(2,8,23,.05); font-weight:950; font-size:12.5px; color:rgba(15,23,42,.88); } .pill.rating{border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.10)} .pill.price{border-color:rgba(14,165,198,.30);background:rgba(14,165,198,.08)} .pill.city{border-color:rgba(100,116,139,.30);background:rgba(15,23,42,.04)} /* иконки внутри pill должны быть в том же деловом stroke‑стиле */ .pill svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:.92; } .pill.rating{background:rgba(14,165,198,.09);border-color:rgba(14,165,198,.28)} .pill.price{background:rgba(16,185,129,.08);border-color:rgba(16,185,129,.26)} .pill.city{background:rgba(15,23,42,.035)} /* ===== Safe deal ("сделка с гарантией") badge & toggle ===== */ .safe-deal-badge{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; margin-left:6px; vertical-align:middle; } .safe-deal-badge .verified-ico{ width:18px; height:18px; display:block; border-radius:6px; box-shadow:0 10px 24px rgba(2,8,23,.12); } .safe-deal-toggle{ position:relative; display:flex; align-items:center; justify-content:flex-end; gap:0; min-width:190px; padding:8px 12px; border-radius:14px; border:1px solid var(--border); background:rgba(255,255,255,.94); box-shadow:0 10px 24px rgba(2,8,23,.05); } .safe-deal-toggle .label{ position:absolute; left:50%; transform:translateX(-50%); width:calc(100% - 70px); text-align:center; pointer-events:none; white-space:nowrap; font-weight:950; font-size:12.5px; color:rgba(15,23,42,.88); } .safe-deal-toggle .switch{margin-left:auto;} .switch{position:relative;display:inline-block;width:46px;height:26px;flex:0 0 auto} .switch input{opacity:0;width:0;height:0} .switch .slider{ position:absolute;top:0;left:0;right:0;bottom:0; background:rgba(100,116,139,.35); border:1px solid rgba(226,232,240,.95); border-radius:999px; transition:.18s; cursor:pointer; } .switch .slider:before{ position:absolute; content:''; height:22px; width:22px; left:2px; top:50%; transform:translateY(-50%); background:var(--card); border-radius:999px; box-shadow:0 10px 24px rgba(2,8,23,.12); transition:.18s; } .switch input:checked + .slider{background:rgba(16,185,129,.55);border-color:rgba(16,185,129,.28)} .switch input:checked + .slider:before{ transform:translate(20px, -50%); } .switch input:disabled + .slider{opacity:.65;cursor:not-allowed} /* ===== Image position (drag внутри рамки) ===== */ .img-frame{ position:relative; overflow:hidden; border:1px solid var(--border); border-radius:16px; background:rgba(15,23,42,.04); cursor:pointer; touch-action:manipulation; } .img-frame.draggable{ cursor:grab; user-select:none; touch-action:none; } .img-frame.draggable:active{cursor:grabbing} .img-frame img{ width:100%; height:100%; object-fit:cover; display:block; } .img-frame .hint{ position:absolute; left:10px; bottom:10px; padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.92); font-size:12px; font-weight:900; color:rgba(15,23,42,.75); pointer-events:none; } .avatar-preview{cursor:pointer} /* ========================================================= Buckler UI patches (chat + mobile improvements) ========================================================= */ /* ===== Chat list items (cabinet) ===== */ .chat-item .t{ display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0; } .chat-title{ display:flex; align-items:center; gap:8px; min-width:0; } .chat-title .name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .unread-dot{ width:10px; height:10px; border-radius:999px; background:var(--accent); box-shadow:0 8px 18px rgba(14,165,198,.20); flex:0 0 auto; } .unread-count{ min-width:22px; height:22px; padding:0 6px; border-radius:999px; background:rgba(239,68,68,.96); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:900; line-height:1; box-shadow:0 10px 22px rgba(239,68,68,.24); flex:0 0 auto; } /* ===== Chat messages: fixed window with internal scroll ===== */ .chat-messages{ max-height:520px; overflow:auto; padding-right:6px; /* room for scroll bar */ } .chat-page .chat-messages{ max-height:55vh; } @media (max-width: 980px){ .chat-messages{ max-height:55vh; } } /* day separator */ .msg-day{ text-align:center; color:var(--muted); font-size:12.5px; font-weight:900; margin:14px 0 10px; position:relative; } .msg-day::before, .msg-day::after{ content:""; position:absolute; top:50%; width:34%; height:1px; background:rgba(15,23,42,.10); } .msg-day::before{ left:0; } .msg-day::after{ right:0; } /* message line with time on the left */ .msg-line{ display:flex; gap:10px; align-items:flex-end; margin:8px 0; } .msg-line.mine{ justify-content:flex-end; } .msg-line.other{ justify-content:flex-start; } .msg-time{ font-size:11.5px; color:var(--muted); min-width:46px; white-space:nowrap; } .msg-line.mine .msg-time{ text-align:right; } .msg-line.other .msg-time{ text-align:left; } .msg-files{ margin-top:8px; font-size:13px; line-height:1.5; color:rgba(15,23,42,.85); } .msg-files a{ color:rgba(14,165,198,1); font-weight:900; text-decoration:none; } .msg-files a:hover{ text-decoration:underline; } .chat-contact-warning{ margin-top:10px; display:flex; align-items:flex-start; gap:8px; border-radius:12px; border:1px solid rgba(245,158,11,.26); background:rgba(245,158,11,.10); color:#7c4a03; padding:10px 12px; font-size:12.5px; line-height:1.5; } .chat-contact-warning .ico{ flex:0 0 auto; color:#d97706; margin-top:1px; } .chat-contact-warning strong{ display:block; margin-bottom:2px; color:#7c4a03; } html[data-theme="dark"] .chat-contact-warning{ background:rgba(245,158,11,.14); border-color:rgba(251,191,36,.28); color:#fde68a; } html[data-theme="dark"] .chat-contact-warning strong, html[data-theme="dark"] .chat-contact-warning .ico{ color:#fbbf24; } /* ===== Chat actions menu (single button) ===== */ .chat-actions{ position:relative; display:flex; justify-content:flex-end; align-items:center; gap:10px; flex-wrap:wrap; } .actions-menu{ position:absolute; right:0; top:46px; width:260px; background:var(--card); border:1px solid var(--border); border-radius:16px; box-shadow:0 20px 52px rgba(2,8,23,.16); padding:10px; z-index:2200; } .actions-menu.hidden{ display:none; } .actions-item{ width:100%; display:flex; align-items:center; justify-content:flex-start; gap:10px; padding:10px 12px; border-radius:12px; border:1px solid transparent; background:transparent; font-weight:950; color:rgba(15,23,42,.92); cursor:pointer; transition:.12s; text-align:left; } .actions-item:hover{ background:rgba(15,23,42,.03); border-color:rgba(15,23,42,.06); } .actions-item:disabled{ opacity:.45; cursor:not-allowed; } .actions-sep{ height:1px; background:rgba(15,23,42,.10); margin:8px 0; } /* ===== Chat hint badge: better on mobile + collapsible ===== */ .hint-badge{ border-radius:16px !important; padding:12px 14px !important; display:flex; gap:10px; align-items:flex-start; justify-content:space-between; flex-wrap:nowrap; } .hint-badge .hint-text{ min-width:0; line-height:1.45; } .hint-badge .hint-toggle{ border:0; background:transparent; font-weight:950; color:rgba(14,165,198,1); padding:0; cursor:pointer; white-space:nowrap; } .hint-badge.hint-collapsed .hint-text{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; } .hint-badge.hint-expanded .hint-text{ display:block; } /* ===== Mobile stats chart: keep chart inside card ===== */ .chart-dashboard, .chart-wrap, .chart-canvas{ max-width:100%; } @media (max-width: 980px){ .chart-wrap{ overflow:hidden; min-width:0; } .chart-canvas{ width:100% !important; max-width:100%; min-width:0; } } /* When messages are rendered inside .msg-line (time + bubble), remove standalone margins/autos */ .msg-line .msg{ margin:0; } .msg-line .msg.me{ margin-left:0; } .msg-line .msg.other{ margin-right:0; } /* Chat list: each chat as a framed card */ .chat-list{ padding:10px; } .chat-item{ border:1px solid var(--border); border-radius:14px; margin:10px 0; } .chat-item.active{ border-color: rgba(14,165,198,.35); background: rgba(14,165,198,.06); } /* ===== Support modal (shared) ===== */ .support-form{display:grid;grid-template-columns:1fr 1fr;gap:12px} .support-field{display:flex;flex-direction:column;gap:6px} .support-field label{font-size:12px;color:rgba(15,23,42,.7);font-weight:800} .support-field input,.support-field textarea{padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:var(--card);font-size:14px;outline:none} .support-field textarea{min-height:90px;resize:vertical;grid-column:1 / -1} .support-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px} @media (max-width: 560px){ .support-form{grid-template-columns:1fr} } /* ===== Large screens (wide desktop monitors) ===== */ @media (min-width: 1400px){ .wrap{max-width:1440px;padding:0 32px} main.page{padding:118px 0 72px} .page-title h1{font-size:38px} .page-title p{font-size:15.5px;max-width:980px} .btn-small{font-size:14px;padding:10px 16px} .card{padding:20px;border-radius:18px} .input,.select,.textarea{font-size:14.5px;padding:12px 14px} } @media (min-width: 1700px){ .wrap{max-width:1560px} .page-title h1{font-size:42px} .page-title p{font-size:16px;max-width:1050px} .btn-small{font-size:14.5px;padding:11px 18px} .card{padding:22px;border-radius:20px} } /* hide region/city badge on master cards and master modal (search page) */ .master-region, .city-badge, .region-badge, .badge-city, .badge-region, [data-role="master-city"], [data-role="master-region"], #masterModal .master-city, #masterModal .master-region, #masterCardCity, #masterCardRegion { display: none !important; } /* tooltip hover for guarantee check badge */ .safe-deal-badge .verified-ico { pointer-events: none; } /* Tooltip for "Гарантия сделки" checkmark */ .safe-deal-badge{ display:inline-flex; align-items:center; margin-left:6px; position:relative; cursor: default; pointer-events:auto; } .safe-deal-badge .verified-ico{ pointer-events:none; } .safe-deal-badge::after{ content: attr(data-tip); position:absolute; left:50%; bottom:130%; transform: translateX(-50%) translateY(6px); opacity:0; pointer-events:none; white-space:nowrap; padding:8px 10px; border-radius:12px; font-size:12px; line-height:1.2; background: rgba(15,23,42,.95); color:#fff; box-shadow: 0 12px 30px rgba(0,0,0,.25); transition: opacity .15s ease, transform .15s ease; z-index: 9999; } .safe-deal-badge:hover::after{ opacity:1; transform: translateX(-50%) translateY(0); } /* FIX: allow tooltip to be visible outside master card (card often has overflow:hidden) */ .master-card, .master-card .master-body, .master-card .master-top, .master-card .master-head, .master-card .master-name { overflow: visible !important; } /* Ensure tooltip is above other elements */ .safe-deal-badge{ position: relative; z-index: 50; pointer-events: auto !important; } .safe-deal-badge::after{ z-index: 99999; } /* Tooltip on master profile header */ .page-head, .page-title, #h1 { overflow: visible !important; } /* tooltip visibility on master profile */ .page-head, .page-title, #h1 { overflow: visible !important; } /* ===== Side separators + Theme toggle ===== */ .side-sep{ height:1px; background:linear-gradient(90deg, transparent, rgba(148,163,184,.45), transparent); margin:12px 0; } .theme-block{ display:flex; justify-content:center; } .theme-toggle{ display:flex; gap:10px; padding:10px; border-radius:16px; border:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.76)); box-shadow: 0 14px 35px rgba(2,8,23,.10); backdrop-filter: blur(10px); } .theme-btn{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:14px; border:1px solid transparent; background:transparent; cursor:pointer; transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease; } .theme-btn svg{ width:20px; height:20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity:.9; } .theme-btn.active{ background:linear-gradient(180deg, rgba(14,165,198,.18), rgba(14,165,198,.08)); border-color:rgba(14,165,198,.35); box-shadow: 0 10px 24px rgba(14,165,198,.15); } .theme-btn:active{ transform: translateY(1px); } .theme-btn:hover{ box-shadow: 0 12px 26px rgba(2,8,23,.12); } /* ===== Premium toggle (Safe deal) ===== */ .safe-deal-toggle{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-radius:16px; border:1px solid rgba(148,163,184,.35); background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.76)); box-shadow: 0 12px 30px rgba(2,8,23,.10); backdrop-filter: blur(10px); } .safe-deal-toggle .label{ position:static; transform:none; width:auto; margin:0; padding:0; font-weight:950; font-size:13px; letter-spacing:.2px; color:rgba(15,23,42,.88); white-space:nowrap; } .safe-deal-toggle .switch{ width:54px; height:30px; margin:0; flex:0 0 auto; } .switch input{ opacity:0; width:0; height:0; } .switch .slider{ position:absolute; cursor:pointer; inset:0; border-radius:999px; border:1px solid rgba(148,163,184,.45); background:linear-gradient(180deg, rgba(148,163,184,.22), rgba(148,163,184,.10)); box-shadow: inset 0 6px 18px rgba(2,8,23,.10), 0 10px 24px rgba(2,8,23,.10); transition: .22s; } .switch .slider:before{ content:""; position:absolute; height:26px; width:26px; left:2px; top:50%; transform: translateY(-50%); border-radius:999px; background:linear-gradient(180deg, #fff, #e2e8f0); box-shadow: 0 10px 25px rgba(2,8,23,.18), inset 0 1px 0 rgba(255,255,255,.9); transition: .22s; } .switch input:checked + .slider{ border-color:rgba(14,165,198,.45); background:linear-gradient(90deg, rgba(34,197,94,.75), rgba(14,165,198,.72)); } .switch input:checked + .slider:before{ transform: translate(24px, -50%); } /* ===== Dark theme (Telegram-like) ===== */ html[data-theme="dark"]{ color-scheme: dark; /* Telegram-like palette */ --dark:#0B141D; --bg:#0E1621; --card:#17212B; --text:#E6EDF3; --muted:#8EA2B3; --label:#B6C2CF; --border:#22303D; /* Accent */ --accent:#2EA6FF; --accent2:#1F8FE0; /* States */ --green:#33C659; --danger:#FF5D5D; /* Depth */ --shadow: 0 10px 30px rgba(0,0,0,.40); --shadow2: 0 6px 22px rgba(0,0,0,.32); /* Inputs / glass */ --input-bg:#1F2A36; --input-border:#22303D; --glass: rgba(23,33,43,.86); } html[data-theme="dark"] body{ background: linear-gradient(180deg, #0E1621 0%, #0B141D 100%); } html[data-theme="dark"] body.search-page{ background: linear-gradient(180deg, #0E1621 0%, #0B141D 100%); } html[data-theme="dark"] body.search-page .page-head .page-title h1{color:var(--text)} html[data-theme="dark"] body.search-page .page-head .page-title p{color:var(--muted)} /* Header */ html[data-theme="dark"] header{ background: rgba(23,33,43,.92); border-bottom:1px solid var(--border); } html[data-theme="dark"] header::before{opacity:0} html[data-theme="dark"] header::after{background: rgba(23,33,43,.92)} html[data-theme="dark"] .header-shell{ background: rgba(23,33,43,.72); border-color: rgba(34,48,61,.88); box-shadow: 0 14px 40px rgba(0,0,0,.35); } /* Cards / surfaces */ html[data-theme="dark"] .card{ border-color: var(--border); box-shadow: var(--shadow); } html[data-theme="dark"] .pill, html[data-theme="dark"] .badge, html[data-theme="dark"] .tag{ background: #1F2A36; border-color: var(--border); color: var(--text); } /* Keep rating/price pills visually similar to light theme (tinted) */ html[data-theme="dark"] .pill.rating{ background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.35); } html[data-theme="dark"] .pill.price{ background: rgba(14,165,198,.12); border-color: rgba(14,165,198,.32); } /* Forms */ html[data-theme="dark"] .input, html[data-theme="dark"] .select, html[data-theme="dark"] .textarea{ box-shadow:none; } html[data-theme="dark"] .input:focus, html[data-theme="dark"] .select:focus, html[data-theme="dark"] .textarea:focus{ border-color: rgba(46,166,255,.95); box-shadow:0 0 0 3px rgba(46,166,255,.22); } /* Buttons */ html[data-theme="dark"] .btn-small{ background:#1F2A36; border-color: var(--border); color: var(--text); } html[data-theme="dark"] .btn-small:hover{ box-shadow:0 14px 30px rgba(0,0,0,.35); } html[data-theme="dark"] .btn-small.primary{ background: linear-gradient(180deg, #2EA6FF 0%, #1F8FE0 100%); border-color: transparent; color:#fff; box-shadow: 0 14px 34px rgba(46,166,255,.22); } html[data-theme="dark"] .btn-small.primary:hover{ box-shadow: 0 18px 44px rgba(46,166,255,.30); } /* Side navigation */ html[data-theme="dark"] .side a{ color: rgba(230,237,243,.92); } html[data-theme="dark"] .side a:hover{ background: rgba(255,255,255,.04); } html[data-theme="dark"] .side a.active{ background: rgba(46,166,255,.16); border-color: rgba(46,166,255,.28); } html[data-theme="dark"] .side a .nav-ico{ background:#1F2A36; border-color: var(--border); color: rgba(142,162,179,.92); } html[data-theme="dark"] .side a.active .nav-ico{ background: rgba(46,166,255,.18); border-color: rgba(46,166,255,.40); color: #2EA6FF; } html[data-theme="dark"] .side a.support-link{ box-shadow:0 14px 34px rgba(46,166,255,.18); } html[data-theme="dark"] .side a.support-link:hover{ box-shadow:0 18px 44px rgba(46,166,255,.26); } /* Chat */ html[data-theme="dark"] .chat-item:hover{ background: rgba(255,255,255,.04); } html[data-theme="dark"] .chat-item.active{ background: rgba(46,166,255,.14); } html[data-theme="dark"] .support-chat-item:hover{ background: rgba(255,255,255,.04); } html[data-theme="dark"] .support-chat-item.active{ background: rgba(46,166,255,.14); } html[data-theme="dark"] .chat-messages{ background: #0E1621; border-color: var(--border); } html[data-theme="dark"] .msg{ box-shadow:none; } html[data-theme="dark"] .msg.other{ background: #182533; border-color: #22303D; } html[data-theme="dark"] .msg.me{ background: #2B5278; border-color: #2B5278; color:#fff; } html[data-theme="dark"] .msg .meta{ color: rgba(142,162,179,.88); } html[data-theme="dark"] .msg.me .meta{ color: rgba(255,255,255,.70); } html[data-theme="dark"] .msg.system{ background: rgba(23,33,43,.92); border: 1px dashed rgba(142,162,179,.30); color: rgba(142,162,179,.95); } /* Modals */ html[data-theme="dark"] .modal-overlay{ background: rgba(0,0,0,.65); } html[data-theme="dark"] .modal{ background: var(--card); border:1px solid var(--border); box-shadow: 0 30px 90px rgba(0,0,0,.60); } html[data-theme="dark"] .modal .x{ background:#1F2A36; border-color: var(--border); color: var(--text); } /* Index page modals (auth/support) */ html[data-theme="dark"] .auth-box, html[data-theme="dark"] .support-box{ background: var(--card) !important; color: var(--text) !important; } html[data-theme="dark"] .auth-close, html[data-theme="dark"] .support-close{ background:#1F2A36 !important; border-color: var(--border) !important; color: var(--text) !important; } html[data-theme="dark"] .auth-box input, html[data-theme="dark"] .support-box input, html[data-theme="dark"] .support-box textarea{ background: var(--input-bg) !important; border-color: var(--input-border) !important; color: var(--text) !important; } html[data-theme="dark"] .auth-box input:focus, html[data-theme="dark"] .support-box input:focus, html[data-theme="dark"] .support-box textarea:focus{ border-color: rgba(46,166,255,.95) !important; box-shadow: 0 0 0 3px rgba(46,166,255,.22) !important; } /* Premium theme toggle */ html[data-theme="dark"] .theme-toggle{ background:#17212B; border-color: var(--border); box-shadow: 0 12px 32px rgba(0,0,0,.45); } html[data-theme="dark"] .theme-btn{ color: var(--text); } html[data-theme="dark"] .theme-btn:hover{ box-shadow: 0 14px 28px rgba(0,0,0,.35); } html[data-theme="dark"] .theme-btn.active{ background: rgba(46,166,255,.18); border-color: rgba(46,166,255,.40); box-shadow: 0 12px 28px rgba(46,166,255,.18); } /* Premium safe-deal toggle */ html[data-theme="dark"] .safe-deal-toggle{ border-color: var(--border); background:#17212B; box-shadow: 0 12px 32px rgba(0,0,0,.45); } html[data-theme="dark"] .safe-deal-toggle .label{ color: rgba(230,237,243,.92); } html[data-theme="dark"] .switch .slider{ border-color: var(--border); background:#1F2A36; box-shadow: inset 0 6px 18px rgba(0,0,0,.45), 0 10px 24px rgba(0,0,0,.28); } html[data-theme="dark"] .switch .slider:before{ background: linear-gradient(180deg, #E6EDF3 0%, #B6C2CF 100%); box-shadow: 0 10px 24px rgba(0,0,0,.55); } html[data-theme="dark"] .switch input:checked + .slider{ border-color: rgba(46,166,255,.65); background: linear-gradient(90deg, #2EA6FF 0%, #1F8FE0 100%); } html[data-theme="dark"] .auth-link{ color: rgba(230,237,243,.78) !important; } html[data-theme="dark"] .auth-link:hover{ color: rgba(230,237,243,.95) !important; } html[data-theme="dark"] .muted2{opacity:.96} /* ===== Dark theme fixes (homepage readability + premium UI) ===== */ /* Header nav links on dark header (index + other pages that reuse header) */ html[data-theme="dark"] .nav-links{ color: rgba(230,237,243,.82); } html[data-theme="dark"] .nav-links a{ color: rgba(230,237,243,.86); } html[data-theme="dark"] .nav-links a:hover{ background: rgba(255,255,255,.06); color: rgba(230,237,243,.98); } /* Outline buttons (hero/cta) – don’t turn white on hover in dark theme */ html[data-theme="dark"] .btn-outline{ color: rgba(230,237,243,.95) !important; } html[data-theme="dark"] .btn-outline:hover{ background: rgba(255,255,255,.10) !important; color: rgba(230,237,243,.98) !important; } /* "White slides" on main page: features + FAQ */ html[data-theme="dark"] .features{ background: linear-gradient(180deg, #0E1621 0%, #0B141D 100%) !important; } html[data-theme="dark"] .features-title{ color: var(--text) !important; } html[data-theme="dark"] .feature-item{ color: rgba(230,237,243,.92) !important; } html[data-theme="dark"] .handshake-wrap::before{ background: radial-gradient(circle at 45% 40%, rgba(46,166,255,.24), rgba(46,166,255,0) 62%) !important; } html[data-theme="dark"] .handshake-wrap::after{ background: radial-gradient(circle at 50% 50%, rgba(0,0,0,.44), rgba(0,0,0,0) 70%) !important; } html[data-theme="dark"] .faq-item{ background: var(--card) !important; border-color: var(--border) !important; box-shadow: var(--shadow2) !important; } html[data-theme="dark"] .chev{ background:#1F2A36; border-color: var(--border); color: rgba(230,237,243,.78); } /* Remove aggressive red glow on "danger" buttons in dark theme (cabinet/admin) */ html[data-theme="dark"] .btn-small.danger{ background:#1F2A36; border:1px solid rgba(255,93,93,.28); color: rgba(255,93,93,.95); box-shadow:none; } html[data-theme="dark"] .btn-small.danger:hover{ background: rgba(255,93,93,.10); box-shadow:0 14px 30px rgba(0,0,0,.35); } /* Chat actions dropdown ("Действия") – readable text on dark surfaces */ html[data-theme="dark"] .actions-menu{ background: var(--card); border-color: var(--border); box-shadow: 0 26px 64px rgba(0,0,0,.55); } html[data-theme="dark"] .actions-item{ color: rgba(230,237,243,.94); } html[data-theme="dark"] .actions-item:hover{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.08); } html[data-theme="dark"] .actions-sep{ background: rgba(142,162,179,.22); } /* Master profile header (opened from search) – remove white block in dark theme */ html[data-theme="dark"] .profile-hero{ background: var(--card) !important; border-color: var(--border) !important; } html[data-theme="dark"] .profile-cover{ background:#22303D !important; } html[data-theme="dark"] .gallery-item{ background: var(--card) !important; border-color: var(--border) !important; box-shadow: var(--shadow) !important; } /* Dark theme readability fixes */ .spec-text{font-weight:900;color:rgba(15,23,42,.85);} html[data-theme="dark"] .master-meta{color:rgba(230,237,243,.92) !important;} html[data-theme="dark"] .spec-text{color:rgba(230,237,243,.92) !important;} html[data-theme="dark"] .stage-bullet{color:rgba(230,237,243,.92);border-color:rgba(46,166,255,.45);background:rgba(46,166,255,.14);} html[data-theme="dark"] .master-avatar{color:rgba(230,237,243,.92);} html[data-theme="dark"] .support-box label{color:rgba(230,237,243,.92);} html[data-theme="dark"] .support-box .label{color:rgba(230,237,243,.92);} html[data-theme="dark"] .support-box .support-field label{color:rgba(230,237,243,.92);} html[data-theme="dark"] .modal .label{color:rgba(230,237,243,.92);} /* Presence (online / last seen) */ .master-presence{ margin-top: 2px; font-size: 12px; line-height: 1.2; } .presence{ font-size: 12px; line-height: 1.2; } .presence.online{ color: rgba(34,197,94,1); font-weight: 800; } .presence.offline{ color: var(--muted); } /* Chat message read receipts */ .msg .status{ margin-top: 2px; font-size: 12px; color: var(--muted); opacity: .9; text-align: right; } /* ===== Internal message notifications ===== */ .top-notice{ position: fixed; top: 12px; left: 50%; transform: translateX(-50%); width: calc(100% - 24px); max-width: 720px; z-index: 4000; display: none; } .top-notice.show{ display: block; } .top-notice-card{ background: var(--card); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 12px 30px rgba(2,6,23,.22); padding: 12px 14px; } .top-notice-title{ font-weight: 900; margin-bottom: 2px; } .top-notice-text{ color: var(--muted); font-weight: 700; line-height: 1.25; word-break: break-word; } /* ===== Unread badge (cabinet → chats) ===== */ .nav-badge{ margin-left: auto; display: none; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: rgba(239,68,68,1); color: #fff; font-weight: 900; font-size: 12px; line-height: 1; } /* ===== Master card metrics (views + favorites) ===== */ .master-card .master-actions{ justify-content: space-between; align-items: flex-end; } .master-card .master-buttons{ display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } .master-card .master-metrics{ display: flex; gap: 12px; align-items: center; color: var(--muted); font-weight: 800; font-size: 12px; } .master-card .master-metrics .metric{ display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; } /* ===== Favorites cards (client cabinet) ===== */ .gallery-item{content-visibility:auto;contain-intrinsic-size:320px 280px} .favorite-master-card{ padding: 0; overflow: hidden; } .favorite-master-card .master-body{ padding: 16px; } .favorite-master-head{ display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; align-items: flex-start; } .favorite-master-avatar-wrap{ width: 88px; height: 88px; border-radius: 20px; overflow: hidden; border: 1px solid var(--border); background: rgba(148,163,184,.14); box-shadow: 0 10px 24px rgba(2,8,23,.06); } .favorite-master-avatar{ width: 100%; height: 100%; display: block; object-fit: cover; } .favorite-master-main{ min-width: 0; display: flex; flex-direction: column; gap: 6px; } .favorite-master-title{ line-height: 1.25; overflow-wrap: anywhere; word-break: break-word; } .favorite-master-meta{ color: var(--muted); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; word-break: break-word; } .favorite-master-rating, .favorite-master-price{ display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; line-height: 1.4; color: var(--muted); font-weight: 800; overflow-wrap: anywhere; } .favorite-master-rating .txt-ico, .favorite-master-price .txt-ico{ flex: 0 0 auto; } .favorite-master-tags{ margin-top: 2px; } .favorite-master-tags .tag{ max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .favorite-master-actions{ margin-top: 14px; justify-content: flex-start; align-items: stretch; } .favorite-master-buttons{ width: 100%; justify-content: flex-start; } @media (max-width: 640px){ .favorite-master-head{ grid-template-columns: 72px minmax(0, 1fr); } .favorite-master-avatar-wrap{ width: 72px; height: 72px; border-radius: 18px; } .favorite-master-buttons{ flex-direction: column; align-items: stretch; } .favorite-master-buttons .btn-small{ width: 100%; justify-content: center; } } html[data-theme="dark"] .support-title, html[data-theme="dark"] .support-box .h, html[data-theme="dark"] .support-request-title{ color:#F8FBFF !important; } html[data-theme="dark"] .support-box .p, html[data-theme="dark"] .support-sub{ color:rgba(230,237,243,.78) !important; } /* Professional action labels for chat previews and bubbles */ .chat-preview-line{ display:flex; align-items:center; gap:8px; min-width:0; max-width:100%; } .chat-preview-text{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .msg-action-chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; border:1px solid rgba(148,163,184,.24); background:rgba(248,250,252,.96); color:var(--text); font-size:11px; font-weight:900; line-height:1; letter-spacing:.02em; flex:0 0 auto; max-width:100%; } .msg-action-chip .txt-ico{ width:14px; height:14px; flex:0 0 auto; } .msg-action-chip--neutral{ background:rgba(241,245,249,.96); border-color:rgba(148,163,184,.28); } .msg-action-chip--info{ background:rgba(224,242,254,.98); border-color:rgba(56,189,248,.24); color:#075985; } .msg-action-chip--success{ background:rgba(220,252,231,.98); border-color:rgba(34,197,94,.24); color:#166534; } .msg-action-chip--warning{ background:rgba(254,249,195,.98); border-color:rgba(234,179,8,.24); color:#854d0e; } .msg-action-chip--danger{ background:rgba(254,226,226,.98); border-color:rgba(239,68,68,.24); color:#b91c1c; } .msg-action-card{ display:flex; flex-direction:column; gap:8px; min-width:0; } .msg-action-body{ min-width:0; line-height:1.55; } .msg-action-body a{ overflow-wrap:anywhere; word-break:break-word; } .support-chat-page .msg .text, .support-panel-page .msg .text{ overflow-wrap:break-word; word-break:normal; hyphens:none; } html[data-theme="dark"] .msg-action-chip{ background:rgba(15,23,42,.88); border-color:rgba(71,85,105,.42); color:#e2e8f0; } html[data-theme="dark"] .msg-action-chip--neutral{ background:rgba(30,41,59,.88); border-color:rgba(71,85,105,.42); } html[data-theme="dark"] .msg-action-chip--info{ background:rgba(8,47,73,.72); border-color:rgba(56,189,248,.26); color:#bae6fd; } html[data-theme="dark"] .msg-action-chip--success{ background:rgba(20,83,45,.72); border-color:rgba(34,197,94,.28); color:#bbf7d0; } html[data-theme="dark"] .msg-action-chip--warning{ background:rgba(113,63,18,.72); border-color:rgba(234,179,8,.28); color:#fde68a; } html[data-theme="dark"] .msg-action-chip--danger{ background:rgba(127,29,29,.72); border-color:rgba(239,68,68,.28); color:#fecaca; }