/* ── pic2dot — Global Styles ──────────────────────────────────────────────── */

:root {
    --pd-yellow:   #F2CD37;
    --pd-dark:     #1a1a1a;
    --pd-gray:     #f5f5f5;
    --pd-dot-size: 32px;
}

/* ── Base ───────────────────────────────────────────────────────────────────── */
html, body {
    height: 100%;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background-color: #f9f9f9;
}

.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main { flex: 1; }

/* ── Hero ───────────────────────────────────────────────────────────────────── */
.hero {
    background: radial-gradient(ellipse at top, #2a2a2a 0%, #111111 100%);
    border-bottom: 3px solid var(--pd-yellow);
}

/* ── Navbar ─────────────────────────────────────────────────────────────────── */
.navbar { border-bottom: 2px solid #2a2a2a; }
.navbar-brand { font-size: 1.4rem; letter-spacing: -0.5px; }

/* ── Cards ──────────────────────────────────────────────────────────────────── */
.card {
    border-radius: 12px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.10) !important;
}

/* ── Mosaic preview ─────────────────────────────────────────────────────────── */
.mosaic-preview {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    max-width: 100%;
    border-radius: 8px;
    border: 3px solid #222;
}

/* ── Upload zone ────────────────────────────────────────────────────────────── */
.upload-zone {
    border: 2px dashed #ccc;
    border-radius: 12px;
    padding: 3rem;
    text-align: center;
    background: #fafafa;
    transition: border-color 0.2s, background 0.2s;
    cursor: pointer;
}
.upload-zone:hover {
    border-color: var(--pd-yellow);
    background: #fffdf0;
}

/* ── Blazor error UI ────────────────────────────────────────────────────────── */
#blazor-error-ui {
    background: #ffc107;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    color: #1a1a1a;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .reload { color: #1a1a1a; font-weight: bold; }

/* ── Footer ─────────────────────────────────────────────────────────────────── */
footer { border-top: 1px solid #2a2a2a; font-size: 0.8rem; }

/* ── Utilities ──────────────────────────────────────────────────────────────── */
.color-swatch {
    display: inline-block;
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.2);
    vertical-align: middle;
    margin-right: 6px;
}
.text-dot { color: var(--pd-yellow); }
.bg-dot   { background-color: var(--pd-yellow); }