/* Tailwind-like base styles */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
    margin: 0;
    line-height: inherit;
}

h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
}

a {
    color: inherit;
    text-decoration: inherit;
}

/* Remove all focus styles globally - cleaner approach */
*:focus,
*:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
}

img, svg {
    display: block;
    max-width: 100%;
}

/* Utility classes */
.min-h-screen { min-height: 100vh; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1 1 0%; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.space-x-2 > * + * { margin-left: 0.5rem; }
.space-x-4 > * + * { margin-left: 1rem; }
.space-x-8 > * + * { margin-left: 2rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }

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

.w-5 { width: 1.25rem; }
.w-full { width: 100%; }
.w-64 { width: 16rem; }
.h-5 { height: 1.25rem; }
.h-16 { height: 4rem; }

.max-w-md { max-width: 28rem; }
.max-w-7xl { max-width: 80rem; }

.mx-auto { margin-left: auto; margin-right: auto; }
.ml-64 { margin-left: 16rem; }
.ml-8 { margin-left: 2rem; }
.mr-3 { margin-right: 0.75rem; }
.mt-auto { margin-top: auto; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }

.p-4 { padding: 1rem; }
.p-8 { padding: 2rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }

.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.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; }

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

.text-center { text-align: center; }

.text-white { color: #ffffff; }
.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }
.text-gray-600 { color: #4b5563; }
.text-gray-700 { color: #374151; }
.text-gray-900 { color: #111827; }
.text-sky-600 { color: #0284c7; }
.text-sky-700 { color: #0369a1; }
.text-red-600 { color: #dc2626; }
.text-green-600 { color: #16a34a; }

.bg-white { background-color: #ffffff; }
.bg-gray-50 { background-color: #f9fafb; }
.bg-gray-100 { background-color: #f3f4f6; }
.bg-gray-700 { background-color: #374151; }
.bg-gray-800 { background-color: #1f2937; }
.bg-gray-900 { background-color: #111827; }
.bg-sky-600 { background-color: #0284c7; }
.bg-sky-700 { background-color: #0369a1; }
.bg-red-50 { background-color: #fef2f2; }
.bg-green-50 { background-color: #f0fdf4; }

.border { border-width: 1px; }
.border-t { border-top-width: 1px; }
.border-b { border-bottom-width: 1px; }
.border-gray-200 { border-color: #e5e7eb; }
.border-gray-300 { border-color: #d1d5db; }
.border-gray-700 { border-color: #374151; }
.border-red-300 { border-color: #fca5a5; }
.border-green-300 { border-color: #86efac; }

.rounded { border-radius: 0.25rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }

.shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.shadow { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }

.fixed { position: fixed; }
.inset-y-0 { top: 0; bottom: 0; }
.left-0 { left: 0; }

/* Form styles */
.form-input {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #111827;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
}

.form-input:focus {
    outline: none;
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.1);
}

.form-label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.5rem;
    transition: all 0.15s ease-in-out;
    cursor: pointer;
    border: none;
}

.btn-primary {
    background-color: #0284c7;
    color: #ffffff;
}

.btn-primary:hover {
    background-color: #0369a1;
}

.btn-secondary {
    background-color: #ffffff;
    color: #374151;
    border: 1px solid #d1d5db;
}

.btn-secondary:hover {
    background-color: #f9fafb;
}

.btn-danger {
    background-color: #dc2626;
    color: #ffffff;
}

.btn-danger:hover {
    background-color: #b91c1c;
}

/* Nav link styles */
.nav-link {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
    border-bottom: 2px solid transparent;
}

.nav-link:hover {
    color: #111827;
    border-bottom-color: #d1d5db;
}

.nav-link.active {
    color: #0284c7;
    border-bottom-color: #0284c7;
}

/* Admin nav link */
.admin-nav-link {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #9ca3af;
    border-radius: 0.375rem;
    transition: all 0.15s ease-in-out;
}

.admin-nav-link:hover {
    color: #ffffff;
    background-color: #374151;
}

.admin-nav-link.active {
    color: #ffffff;
    background-color: #0284c7;
}

/* Card styles */
.card {
    background-color: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    overflow: hidden;
}

.card-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.card-body {
    padding: 1.5rem;
}

.blog-content { line-height: 1.7; color: #374151; }
.blog-content h2 { font-size: 1.5rem; font-weight: 700; margin: 2rem 0 0.75rem; color: #111827; }
.blog-content h3 { font-size: 1.2rem; font-weight: 600; margin: 1.5rem 0 0.5rem; color: #111827; }
.blog-content p { margin: 0 0 1rem; }
.blog-content a { color: #0284c7; text-decoration: underline; }
.blog-content ul, .blog-content ol { margin: 0 0 1rem 1.25rem; }
.blog-content li { margin: 0.25rem 0; }
.blog-content pre { background: #f3f4f6; padding: 1rem; border-radius: 0.5rem; overflow-x: auto; margin-bottom: 1rem; }
.blog-content code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; }

/* Alert styles */
.alert {
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.alert-error {
    background-color: #fef2f2;
    border: 1px solid #fca5a5;
    color: #dc2626;
}

.alert-success {
    background-color: #f0fdf4;
    border: 1px solid #86efac;
    color: #16a34a;
}

/* Responsive */
@media (min-width: 640px) {
    .sm\:flex { display: flex; }
    .sm\:ml-8 { margin-left: 2rem; }
    .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
}

@media (min-width: 1024px) {
    .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
}

/* Homepage twilight sky */
.ts-night {
    background: #070b14;
    color: #e2e8f0;
}

.ts-sky {
    position: relative;
    overflow: hidden;
    min-height: 40rem;
    background:
        radial-gradient(ellipse 80% 50% at 50% 100%, rgba(234, 120, 62, 0.38), transparent 55%),
        radial-gradient(ellipse 50% 40% at 70% 88%, rgba(124, 78, 160, 0.35), transparent 60%),
        linear-gradient(180deg, #070b16 0%, #12183a 48%, #2a1a3e 78%, #6a3a45 100%);
}

.ts-stars,
.ts-stars-far {
    position: absolute;
    inset: -15%;
    pointer-events: none;
    background-repeat: repeat;
}

.ts-stars {
    background-image:
        radial-gradient(1.5px 1.5px at 8% 16%, #fff, transparent),
        radial-gradient(1px 1px at 18% 42%, rgba(255,255,255,.85), transparent),
        radial-gradient(1.5px 1.5px at 27% 12%, #fff, transparent),
        radial-gradient(1px 1px at 36% 68%, rgba(255,255,255,.7), transparent),
        radial-gradient(2px 2px at 44% 22%, #fde68a, transparent),
        radial-gradient(1px 1px at 52% 48%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 63% 14%, #fff, transparent),
        radial-gradient(1px 1px at 71% 36%, rgba(255,255,255,.8), transparent),
        radial-gradient(1px 1px at 78% 62%, #fff, transparent),
        radial-gradient(2px 2px at 86% 20%, #fff, transparent),
        radial-gradient(1px 1px at 92% 44%, rgba(255,255,255,.75), transparent),
        radial-gradient(1px 1px at 14% 78%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 33% 88%, rgba(253,230,138,.9), transparent),
        radial-gradient(1px 1px at 58% 82%, #fff, transparent),
        radial-gradient(1px 1px at 81% 86%, rgba(255,255,255,.7), transparent);
    background-size: 340px 240px;
    animation: ts-twinkle 6s ease-in-out infinite alternate;
}

.ts-stars-far {
    opacity: 0.55;
    background-image:
        radial-gradient(1px 1px at 12% 28%, #fff, transparent),
        radial-gradient(1px 1px at 24% 8%, rgba(255,255,255,.6), transparent),
        radial-gradient(1px 1px at 41% 58%, #fff, transparent),
        radial-gradient(1px 1px at 66% 32%, rgba(255,255,255,.7), transparent),
        radial-gradient(1px 1px at 88% 70%, #fff, transparent),
        radial-gradient(1px 1px at 6% 60%, rgba(255,255,255,.5), transparent),
        radial-gradient(1px 1px at 73% 8%, #fff, transparent);
    background-size: 420px 300px;
    animation: ts-twinkle 9s ease-in-out infinite alternate-reverse;
}

.ts-tracks {
    position: absolute;
    left: 0;
    width: 100%;
    pointer-events: none;
}

.ts-tracks-top {
    top: 0;
    height: 11rem;
}

.ts-tracks-bottom {
    bottom: 0;
    height: 8rem;
}

.ts-track {
    fill: none;
    stroke-linecap: round;
}

.ts-sat {
    stroke: rgba(196, 181, 253, 0.9);
    stroke-width: 1.6;
    stroke-dasharray: 14 240;
    animation: ts-dash 22s linear infinite;
}

.ts-sat-2 {
    stroke: rgba(167, 139, 250, 0.55);
    animation-duration: 28s;
    animation-direction: reverse;
}

.ts-plane {
    stroke: rgba(125, 211, 252, 0.75);
    stroke-width: 1.4;
    stroke-dasharray: 3 16;
    animation: ts-dash 11s linear infinite;
}

.ts-meteor {
    stroke: rgba(253, 186, 116, 0.95);
    stroke-width: 2.2;
    stroke-dasharray: 80 520;
    filter: drop-shadow(0 0 6px rgba(251, 146, 60, 0.85));
    animation: ts-dash 4.8s linear infinite;
}

.ts-meteor-2 {
    stroke-width: 1.6;
    animation-duration: 6.4s;
    animation-delay: -2s;
}

.ts-still {
    fill: none;
    stroke: rgba(251, 191, 36, 0.75);
    stroke-width: 1.4;
    stroke-linecap: round;
}

.ts-veil {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 46%, rgba(7, 11, 20, 0.42), rgba(7, 11, 20, 0.08) 68%);
}

.ts-shot {
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 0 0 1px rgba(125, 211, 252, 0.06),
        0 24px 70px -24px rgba(99, 102, 241, 0.55),
        0 18px 40px rgba(0, 0, 0, 0.45);
}

.ts-dot {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    margin-right: 0.4rem;
    border-radius: 999px;
    vertical-align: middle;
}

.ts-dot-odd { background: #fbbf24; }
.ts-dot-met { background: #fb923c; }
.ts-dot-sat { background: #c4b5fd; }
.ts-dot-plane { background: #7dd3fc; }
.ts-dot-off { background: #64748b; }

.ts-ping {
    transform-box: fill-box;
    transform-origin: center;
    animation: ts-ping 2.8s ease-out infinite;
}

.ts-share {
    stroke-dasharray: 4 7;
    animation: ts-share-move 18s linear infinite;
}

@keyframes ts-ping {
    0% { transform: scale(1); opacity: 0.55; }
    100% { transform: scale(3.2); opacity: 0; }
}

@keyframes ts-share-move {
    to { stroke-dashoffset: -140; }
}

.ts-field {
    width: 100%;
    background: #070b14;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    color: #fff;
}

textarea.ts-field {
    min-height: 8rem;
    resize: vertical;
}

.ts-field:focus {
    border-color: #fbbf24;
}

.ts-field::placeholder {
    color: #94a3b8;
}

@keyframes ts-twinkle {
    from { opacity: 0.45; }
    to { opacity: 1; }
}

@keyframes ts-dash {
    to { stroke-dashoffset: -780; }
}

@media (prefers-reduced-motion: reduce) {
    .ts-stars,
    .ts-stars-far,
    .ts-track {
        animation: none;
    }

    .ts-track {
        stroke-dasharray: none;
        opacity: 0.4;
    }

    .ts-tracks circle {
        display: none;
    }

    .ts-ping,
    .ts-share {
        animation: none;
    }
}