/* Persona — application-specific CSS overrides. Tailwind ships via CDN. */ html { color-scheme: dark light; } html:not(.dark) { color-scheme: light; } body { font-feature-settings: "cv11", "ss01"; /* iOS dynamic viewport: 100svh (small viewport) учитывает свёрнутый Safari toolbar и не прыгает при scroll, в отличие от 100vh. */ min-height: 100vh; min-height: 100svh; } /* iOS safe-area inset для notch/home-indicator — применяется ТОЛЬКО в PWA standalone (Add to Home Screen). В обычном Safari iOS сам кладёт safe-area через свой UI, поэтому body padding ломает sticky header. */ @media (display-mode: standalone) { body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } /* Fixed-bottom элементы (mobile bottom nav v1.57) должны быть выше home-indicator. */ .fixed-bottom-safe { padding-bottom: env(safe-area-inset-bottom); } } /* iPhone touch-target — все интерактивные элементы должны быть ≥44x44 pt (Apple Human Interface Guidelines). Применяется только к touch-устройствам, чтобы не раздувать UI на desktop. */ @media (pointer: coarse) { button:not(.btn-compact), a.btn:not(.btn-compact), input[type="submit"]:not(.btn-compact), input[type="button"]:not(.btn-compact) { min-height: 44px; } } /* Selection-color чтобы не светило системным синим на тёмной теме. */ ::selection { background: rgba(139, 92, 246, 0.35); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: #f4f4f5; } .dark ::-webkit-scrollbar-track { background: #111114; } ::-webkit-scrollbar-thumb { background: #d4d4d8; border-radius: 5px; } .dark ::-webkit-scrollbar-thumb { background: #26262e; } ::-webkit-scrollbar-thumb:hover { background: #a1a1aa; } .dark ::-webkit-scrollbar-thumb:hover { background: #34343e; } mark { background: rgba(167, 139, 250, 0.25); color: inherit; padding: 0 0.1em; border-radius: 2px; } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Light-mode overrides — apply when the .dark class is absent on . We deliberately tint the "ink" palette toward off-white in light mode so existing dark-styled templates still look decent without rewriting every utility class. */ html:not(.dark) .bg-ink-950 { background-color: #fafafa; } html:not(.dark) .bg-ink-900 { background-color: #f4f4f5; } html:not(.dark) .bg-ink-800 { background-color: #ffffff; } html:not(.dark) .bg-ink-700 { background-color: #e4e4e7; } html:not(.dark) .border-ink-700 { border-color: #e4e4e7; } html:not(.dark) .border-ink-800 { border-color: #d4d4d8; } html:not(.dark) .text-zinc-100 { color: #18181b; } html:not(.dark) .text-zinc-200 { color: #27272a; } html:not(.dark) .text-zinc-300 { color: #3f3f46; } html:not(.dark) .text-zinc-400 { color: #52525b; } html:not(.dark) .text-zinc-500 { color: #71717a; } html:not(.dark) .text-zinc-600 { color: #a1a1aa; } html:not(.dark) .text-zinc-700 { color: #d4d4d8; } html:not(.dark) .hover\:bg-ink-700:hover { background-color: #f4f4f5; } html:not(.dark) .hover\:bg-ink-800:hover { background-color: #f9f9fa; } html:not(.dark) .bg-ink-900\/80 { background-color: rgba(244, 244, 245, 0.85); } html:not(.dark) .bg-ink-900\/50 { background-color: rgba(244, 244, 245, 0.6); }