/* Minimal Tailwind-like utility pack for iGot (no CDN, no build)
   Note: this is not full Tailwind, but covers common classes used in your UI.
   If you find a missing utility later, tell me the class name and I'll add it.
*/

:root { --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; }

*, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e5e7eb; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; }
body { margin: 0; line-height: inherit; }
img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
button, input, optgroup, select, textarea { font: inherit; margin: 0; padding: 0; color: inherit; }
button { background: transparent; cursor: pointer; }
a { color: inherit; text-decoration: inherit; }
.hidden { display: none !important; }

/* Layout */
.flex { display:flex; }
.inline-flex { display:inline-flex; }
.grid { display:grid; }
.block { display:block; }
.items-center { align-items:center; }
.items-start { align-items:flex-start; }
.justify-between { justify-content:space-between; }
.justify-center { justify-content:center; }
.gap-1 { gap:.25rem; } .gap-2{gap:.5rem;} .gap-3{gap:.75rem;} .gap-4{gap:1rem;}
.p-1{padding:.25rem;} .p-2{padding:.5rem;} .p-3{padding:.75rem;} .p-4{padding:1rem;} .p-6{padding:1.5rem;}
.px-2{padding-left:.5rem;padding-right:.5rem;} .px-3{padding-left:.75rem;padding-right:.75rem;} .px-4{padding-left:1rem;padding-right:1rem;}
.py-1{padding-top:.25rem;padding-bottom:.25rem;} .py-2{padding-top:.5rem;padding-bottom:.5rem;} .py-3{padding-top:.75rem;padding-bottom:.75rem;}
.mt-1{margin-top:.25rem;} .mt-2{margin-top:.5rem;} .mt-3{margin-top:.75rem;} .mt-4{margin-top:1rem;}
.mb-1{margin-bottom:.25rem;} .mb-2{margin-bottom:.5rem;} .mb-3{margin-bottom:.75rem;} .mb-4{margin-bottom:1rem;}
.ml-2{margin-left:.5rem;} .mr-2{margin-right:.5rem;}
.w-full{width:100%;} .w-10{width:2.5rem;} .h-10{height:2.5rem;}
.max-w-md{max-width:28rem;} .max-w-lg{max-width:32rem;}
.rounded{border-radius:.25rem;} .rounded-lg{border-radius:.5rem;} .rounded-xl{border-radius:.75rem;} .rounded-2xl{border-radius:1rem;}
.shadow{box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06);} .shadow-lg{box-shadow:0 10px 15px rgba(0,0,0,.1),0 4px 6px rgba(0,0,0,.05);}
.border{border-width:1px;} .border-b{border-bottom-width:1px;}
.text-center{text-align:center;} .text-right{text-align:right;}
.text-sm{font-size:.875rem;} .text-base{font-size:1rem;} .text-lg{font-size:1.125rem;} .text-xl{font-size:1.25rem;}
.font-medium{font-weight:500;} .font-semibold{font-weight:600;} .font-bold{font-weight:700;}
.opacity-80{opacity:.8;} .opacity-60{opacity:.6;}
.cursor-pointer{cursor:pointer;}
.select-none{user-select:none;}
.transition{transition: all .15s ease;}
.duration-200{transition-duration:.2s;}
/* Colors (neutral-ish) */
.bg-white{background:#fff;}
.bg-black{background:#000;}
.bg-gray-50{background:#f9fafb;} .bg-gray-100{background:#f3f4f6;} .bg-gray-900{background:#111827;}
.text-gray-900{color:#111827;} .text-gray-700{color:#374151;} .text-gray-500{color:#6b7280;} .text-white{color:#fff;}
/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.5rem .75rem; border-radius:.5rem; border:1px solid #e5e7eb; background:#fff; }
.btn:hover { background:#f9fafb; }
.btn-primary { background:#111827; color:#fff; border-color:#111827; }
.btn-primary:hover { background:#0b1220; }

/* Modals */
.modal-backdrop { position:fixed; inset:0; background: rgba(0,0,0,.5); display:none; }
.modal-backdrop.active { display:block; }
.modal { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); background:#fff; border-radius:1rem; width:min(92vw, 42rem); max-height:90vh; overflow:auto; display:none; }
.modal.active { display:block; }