/* tw-lite.css — локальная замена для tailwind CDN.
   Цель: убрать зависимость от https://cdn.tailwindcss.com, которая блокирует рендер в ряде сетей/браузеров.
   В файле — только утилиты, реально используемые на страницах проекта (index/prompts/style-generator/legal pages).
*/

/* ---- Base helpers ---- */
.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

.flex{display:flex}
.inline-flex{display:inline-flex}
.grid{display:grid}
.block{display:block}
.hidden{display:none}

.relative{position:relative}

.flex-1{flex:1 1 0%}
.flex-col{flex-direction:column}
.flex-row{flex-direction:row}
.flex-wrap{flex-wrap:wrap}

.items-center{align-items:center}
.items-start{align-items:flex-start}
.items-end{align-items:flex-end}

.justify-between{justify-content:space-between}
.justify-center{justify-content:center}

.self-start{align-self:flex-start}
.shrink-0{flex-shrink:0}

.min-w-0{min-width:0}
.min-h-screen{min-height:100vh}

.w-full{width:100%}
.w-10{width:2.5rem}
.h-10{height:2.5rem}
.w-14{width:3.5rem}
.h-12{height:3rem}
.w-2\.5{width:.625rem}
.h-2\.5{height:.625rem}

.max-w-3xl{max-width:48rem}
.max-w-6xl{max-width:72rem}
.max-w-7xl{max-width:80rem}

.max-h-\[55vh\]{max-height:55vh}
.max-h-\[70vh\]{max-height:70vh}

.overflow-auto{overflow:auto}

.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.whitespace-pre-wrap{white-space:pre-wrap}
.uppercase{text-transform:uppercase}
.text-right{text-align:right}

.transition{transition:all .15s ease}
.opacity-70{opacity:.7}

.cursor-pointer{cursor:pointer}
.cursor-not-allowed{cursor:not-allowed}

/* ---- Spacing ---- */
.mt-0\.5{margin-top:.125rem}
.mt-1{margin-top:.25rem}
.mt-2{margin-top:.5rem}
.mt-3{margin-top:.75rem}
.mt-4{margin-top:1rem}
.mt-5{margin-top:1.25rem}
.mt-6{margin-top:1.5rem}

.mb-2{margin-bottom:.5rem}
.mb-3{margin-bottom:.75rem}
.mb-4{margin-bottom:1rem}
.mb-6{margin-bottom:1.5rem}

.ml-2{margin-left:.5rem}

.my-4{margin-top:1rem;margin-bottom:1rem}
.my-5{margin-top:1.25rem;margin-bottom:1.25rem}
.my-6{margin-top:1.5rem;margin-bottom:1.5rem}

.mx-auto{margin-left:auto;margin-right:auto}

.p-3{padding:.75rem}
.p-4{padding:1rem}
.p-5{padding:1.25rem}
.p-6{padding:1.5rem}

.px-2\.5{padding-left:.625rem;padding-right:.625rem}
.px-3{padding-left:.75rem;padding-right:.75rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}

.py-1{padding-top:.25rem;padding-bottom:.25rem}
.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem}

.pt-8{padding-top:2rem}
.pl-7{padding-left:1.75rem}

/* ---- Gaps ---- */
.gap-2{gap:.5rem}
.gap-3{gap:.75rem}
.gap-4{gap:1rem}
.gap-6{gap:1.5rem}

/* space-y utilities */
.space-y-2 > :not([hidden]) ~ :not([hidden]){margin-top:.5rem}
.space-y-3 > :not([hidden]) ~ :not([hidden]){margin-top:.75rem}
.space-y-6 > :not([hidden]) ~ :not([hidden]){margin-top:1.5rem}

/* ---- Grid ---- */
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.lg\:grid-cols-12{ /* defined in media query below */ }

/* spans */
.col-span-2{grid-column:span 2 / span 2}
.col-span-3{grid-column:span 3 / span 3}
.col-span-4{grid-column:span 4 / span 4}
.col-span-5{grid-column:span 5 / span 5}
.col-span-6{grid-column:span 6 / span 6}
.col-span-7{grid-column:span 7 / span 7}
.col-span-8{grid-column:span 8 / span 8}

/* ---- Radius ---- */
.rounded-xl{border-radius:.75rem}
.rounded-2xl{border-radius:1rem}
.rounded-3xl{border-radius:1.5rem}
.rounded-full{border-radius:9999px}

/* ---- Typography ---- */
.text-\[11px\]{font-size:11px;line-height:1.1}

.text-xs{font-size:.75rem;line-height:1rem}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-4xl{font-size:2.25rem;line-height:2.5rem}

.font-medium{font-weight:500}
.font-semibold{font-weight:600}
.font-bold{font-weight:700}
.font-black{font-weight:900}

.leading-tight{line-height:1.25}
.leading-snug{line-height:1.375}
.leading-relaxed{line-height:1.625}

.tracking-tight{letter-spacing:-.025em}
.tracking-wide{letter-spacing:.05em}

/* ---- Colors ---- */
.text-white{color:#fff}
.text-white\/35{color:rgba(255,255,255,.35)}
.text-white\/40{color:rgba(255,255,255,.40)}
.text-white\/45{color:rgba(255,255,255,.45)}
.text-white\/55{color:rgba(255,255,255,.55)}
.text-white\/60{color:rgba(255,255,255,.60)}
.text-white\/70{color:rgba(255,255,255,.70)}
.text-white\/75{color:rgba(255,255,255,.75)}
.text-white\/80{color:rgba(255,255,255,.80)}
.text-white\/85{color:rgba(255,255,255,.85)}

.text-slate-900{color:#0f172a}
.text-indigo-100{color:#e0e7ff}
.text-emerald-100{color:#d1fae5}
.text-emerald-200{color:#a7f3d0}
.text-amber-100{color:#fef3c7}
.text-red-100{color:#fee2e2}

.bg-transparent{background-color:transparent}
.bg-white{background-color:#fff}
.bg-white\/5{background-color:rgba(255,255,255,.05)}
.bg-white\/6{background-color:rgba(255,255,255,.06)}
.bg-white\/8{background-color:rgba(255,255,255,.08)}
.bg-white\/30{background-color:rgba(255,255,255,.30)}

.bg-indigo-500\/20{background-color:rgba(99,102,241,.20)}
.bg-emerald-500\/20{background-color:rgba(16,185,129,.20)}
.bg-amber-500\/20{background-color:rgba(245,158,11,.20)}
.bg-red-500\/20{background-color:rgba(239,68,68,.20)}
.bg-emerald-400{background-color:#34d399}

.border{border-width:1px;border-style:solid;border-color:rgba(229,231,235,1)}
.border-white\/10{border-color:rgba(255,255,255,.10)}
.border-white\/20{border-color:rgba(255,255,255,.20)}
.border-indigo-300\/20{border-color:rgba(165,180,252,.20)}
.border-emerald-300\/20{border-color:rgba(110,231,183,.20)}
.border-amber-300\/20{border-color:rgba(252,211,77,.20)}
.border-red-300\/20{border-color:rgba(252,165,165,.20)}

/* ---- Gradients (prompts.html) ---- */
.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}
.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}
.from-indigo-500{--tw-gradient-from:#6366f1;--tw-gradient-to:rgba(99,102,241,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.via-fuchsia-500{--tw-gradient-stops:var(--tw-gradient-from),#d946ef,var(--tw-gradient-to)}
.to-emerald-400{--tw-gradient-to:#34d399}

/* ---- Forms ---- */
.accent-indigo-400{accent-color:#818cf8}

/* ---- Hover/Focus variants ---- */
.hover\:bg-white\/10:hover{background-color:rgba(255,255,255,.10)}
.hover\:text-white:hover{color:#fff}
.hover\:opacity-95:hover{opacity:.95}

.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}
.focus\:border-indigo-400:focus{border-color:#818cf8}
.focus\:ring-indigo-500\/20:focus{--tw-ring-color:rgba(99,102,241,.20)}
.focus\:ring-4:focus{box-shadow:0 0 0 4px var(--tw-ring-color, rgba(99,102,241,.20))}

/* ---- Responsive ---- */
@media (min-width:640px){
  .sm\:p-6{padding:1.5rem}
  .sm\:p-8{padding:2rem}
  .sm\:w-auto{width:auto}
  .sm\:flex-row{flex-direction:row}
  .sm\:flex-1{flex:1 1 0%}
  .sm\:items-center{align-items:center}
  .sm\:self-center{align-self:center}
  .sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sm\:col-span-2{grid-column:span 2 / span 2}
}
@media (min-width:768px){
  .md\:text-4xl{font-size:2.25rem;line-height:2.5rem}
}
@media (min-width:1024px){
  .lg\:hidden{display:none}
  .lg\:block{display:block}
  .lg\:flex-row{flex-direction:row}
  .lg\:items-start{align-items:flex-start}
  .lg\:justify-between{justify-content:space-between}
  .lg\:mt-0{margin-top:0}
  .lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
  .lg\:col-span-3{grid-column:span 3 / span 3}
  .lg\:col-span-4{grid-column:span 4 / span 4}
  .lg\:col-span-5{grid-column:span 5 / span 5}
  .lg\:col-span-6{grid-column:span 6 / span 6}
  .lg\:col-span-7{grid-column:span 7 / span 7}
  .lg\:col-span-8{grid-column:span 8 / span 8}
}

/* tabs used by prompts.js */
.tab-active{background-color:rgba(255,255,255,.10);border-color:rgba(255,255,255,.18);color:#fff;font-weight:600}
.tab-idle{background-color:transparent;border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.75)}