/* =========================================================
   COMMISSION HUB — soft scrapbook style
   ========================================================= */

:root {
    --cream: #f7f0e4;
    --paper: #fffdf8;
    --mint: #9bdcca;
    --mint-light: #dcf3ea;
    --mint-dark: #468d7a;
    --pink: #f0b6c4;
    --pink-light: #fbe3e8;
    --pink-dark: #c2637d;
    --dulce: #d3a078;
    --dulce-light: #f3dcc4;
    --dulce-dark: #96604a;
    --choco: #3b2924;
    --text: #4d3b34;
    --soft: #8a7469;
    --line: rgba(96, 65, 55, .12);
    --radius: 22px;
    --shadow: 0 18px 40px -12px rgba(72, 51, 42, .22);
    --font-head: "Fraunces", Georgia, serif;
    --font-body: "Nunito", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    font-family: var(--font-body);
    line-height: 1.6;
    background: linear-gradient(160deg, #f7f0e4 0%, #fffaf2 50%, #f6eadb 100%);
    background-attachment: fixed;
    overflow-x: hidden;
}

button, input, textarea, select { font: inherit; }

/* ---------- background ---------- */
.page-background { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(10px); animation: float 14s ease-in-out infinite alternate; }
.blob-mint  { width: 520px; height: 520px; top: -200px; left: -160px; background: radial-gradient(circle, rgba(155,220,202,.55), transparent 70%); }
.blob-pink  { width: 460px; height: 460px; top: 40%; right: -180px; background: radial-gradient(circle, rgba(240,182,196,.42), transparent 70%); animation-delay: -5s; }
.blob-dulce { width: 560px; height: 560px; bottom: -240px; left: 20%; background: radial-gradient(circle, rgba(211,160,120,.32), transparent 70%); animation-delay: -9s; }
@keyframes float { to { transform: translate(30px, 24px) scale(1.06); } }

/* ---------- layout ---------- */
.page { width: min(860px, calc(100% - 32px)); margin: 0 auto; padding: 40px 0 60px; }

.card {
    position: relative;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* ---------- hero ---------- */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
    padding: 34px 40px;
    overflow: visible;
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--mint-light), var(--pink-light) 65%, var(--dulce-light));
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}
.hero::after {
    content: "";
    position: absolute; inset: 9px;
    border: 2px dashed rgba(255,255,255,.75);
    border-radius: 16px;
    pointer-events: none;
}
.tiny-title { display: block; margin-bottom: 8px; color: var(--mint-dark); font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.hero h1 { margin: 0; color: var(--choco); font-family: var(--font-head); font-weight: 800; font-size: clamp(42px, 8vw, 68px); line-height: 1; letter-spacing: -.03em; }
.hero h1 span { color: var(--mint-dark); font-style: italic; }
.hero p { margin: 14px 0 0; max-width: 380px; color: var(--soft); font-weight: 600; }

.hero-mascot {
    position: relative; z-index: 2;
    flex: none;
    width: clamp(120px, 26vw, 210px);
    aspect-ratio: 1 / 1;                /* every image fits the same square box */
    margin: -50px -6px -30px 0;
    transform: rotate(4deg);
    filter: drop-shadow(0 12px 14px rgba(70,45,35,.22));
    animation: bob 4.5s ease-in-out infinite;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.hero-mascot img {
    display: block; width: 100%; height: 100%;
    object-fit: contain;                /* any size / ratio: PNG, GIF, JPG, WEBP */
    user-select: none; -webkit-user-drag: none;
}
@keyframes bob { 50% { transform: rotate(4deg) translateY(-8px); } }

/* ---------- commission card ---------- */
.commission-card { padding: 42px 44px 46px; }
.commission-card::before {
    content: "";
    position: absolute; top: -13px; left: 50%;
    width: 120px; height: 28px;
    transform: translateX(-50%) rotate(-2deg);
    background: repeating-linear-gradient(90deg, rgba(255,255,255,.25) 0 4px, transparent 4px 9px), rgba(243,220,196,.9);
    box-shadow: 0 2px 6px rgba(72,51,42,.12);
}

.eyebrow { margin-bottom: 4px; color: var(--mint-dark); font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
h2 { margin: 0; color: var(--choco); font-family: var(--font-head); font-size: 30px; line-height: 1.15; }

.commission-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.commission-number { color: var(--dulce-dark); }

/* status badge */
.status-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13px; font-weight: 800;
    background: var(--mint-light); color: var(--mint-dark);
    --dot: var(--mint-dark);
}
.status-badge[data-status="pending"]   { background: var(--dulce-light); color: var(--dulce-dark); --dot: var(--dulce-dark); }
.status-badge[data-status="paused"]    { background: var(--pink-light);  color: var(--pink-dark);  --dot: var(--pink-dark); }
.status-badge[data-status="completed"] { background: #cdeedd; color: #2f7a55; --dot: #2f7a55; }
.status-badge[data-status="loading"]   { background: #eee6da; color: var(--soft); --dot: var(--soft); }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dot); }
.status-badge[data-status="progress"] .status-dot { animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(70,141,122,.55); } 100% { box-shadow: 0 0 0 9px rgba(70,141,122,0); } }

/* client note */
.client-note {
    display: inline-flex; align-items: center; gap: 12px;
    margin-bottom: 30px; padding: 12px 20px 12px 16px;
    background: #fff3cf;
    border-radius: 6px 16px 16px 6px;
    box-shadow: 3px 6px 14px rgba(96,65,55,.12);
    transform: rotate(-1deg);
}
.client-heart { color: var(--pink-dark); font-size: 24px; }
.client-note span { display: block; color: var(--soft); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.client-note strong { color: var(--choco); font-size: 17px; }

/* progress */
.progress-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; font-weight: 700; color: var(--soft); }
.progress-top strong { color: var(--choco); font-family: var(--font-head); font-size: 22px; }
.progress-container { height: 28px; padding: 4px; border-radius: 999px; background: #efe6d8; box-shadow: inset 0 2px 5px rgba(72,51,42,.16); }

/* Lava-lamp liquid: the filled part glows and blobs drift left <-> right */
.progress-bar {
    position: relative; overflow: hidden;
    width: 0; height: 100%; min-width: 0;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.45) 0, rgba(255,255,255,0) 45%),   /* liquid shine */
        linear-gradient(90deg, var(--mint), #cdeee2 22%, #fbe3e8 45%, var(--pink) 70%, var(--dulce));
    background-size: 100% 100%, 200% 100%;
    box-shadow: 0 0 12px rgba(240,182,196,.55);
    transition: width 1.3s cubic-bezier(.22,1,.36,1);
    animation: liquidColors 9s ease-in-out infinite alternate;
}

.progress-bar::before,
.progress-bar::after {
    content: "";
    position: absolute; inset: -30% 0;
    background-repeat: no-repeat;
    filter: blur(2.5px);
    pointer-events: none;
}

/* big soft blobs */
.progress-bar::before {
    background-image:
        radial-gradient(closest-side, rgba(255,255,255,.75), rgba(255,255,255,0)),
        radial-gradient(closest-side, rgba(238,140,170,.75), rgba(238,140,170,0)),
        radial-gradient(closest-side, rgba(95,195,168,.7),  rgba(95,195,168,0));
    background-size: 26% 80%, 20% 65%, 32% 90%;
    background-position: 0% 30%, 100% 70%, 40% 50%;
    animation: lavaBig 7s ease-in-out infinite alternate;
}

/* small bubbles, faster and in the opposite direction */
.progress-bar::after {
    background-image:
        radial-gradient(closest-side, rgba(255,255,255,.9), rgba(255,255,255,0)),
        radial-gradient(closest-side, rgba(226,170,120,.8), rgba(226,170,120,0)),
        radial-gradient(closest-side, rgba(255,255,255,.8), rgba(255,255,255,0)),
        radial-gradient(closest-side, rgba(238,140,170,.7), rgba(238,140,170,0));
    background-size: 12% 40%, 9% 32%, 14% 44%, 10% 34%;
    background-position: 100% 25%, 0% 75%, 60% 40%, 25% 65%;
    animation: lavaSmall 4.6s ease-in-out infinite alternate;
}

@keyframes lavaBig {
    0%   { background-position:   0% 30%, 100% 70%,  40% 50%; }
    50%  { background-position:  70% 75%,  25% 25%, 100% 35%; }
    100% { background-position: 100% 25%,   0% 80%,   5% 60%; }
}
@keyframes lavaSmall {
    0%   { background-position: 100% 25%,   0% 75%,  60% 40%,  25% 65%; }
    50%  { background-position:  30% 70%,  80% 20%,   5% 75%,  90% 30%; }
    100% { background-position:   0% 30%, 100% 80%, 100% 30%,  50% 70%; }
}
@keyframes liquidColors { to { background-position: 0 0, 100% 0; } }
.progress-labels { display: flex; justify-content: space-between; margin-top: 9px; color: var(--soft); font-size: 12px; font-weight: 700; }

/* divider */
.paper-divider { display: flex; align-items: center; gap: 14px; margin: 34px 0 28px; color: var(--dulce); }
.paper-divider span { flex: 1; border-top: 2px dashed rgba(211,160,120,.45); }

/* ---------- updates timeline ---------- */
.updates-description { margin: 6px 0 26px; color: var(--soft); }

#updates { position: relative; display: grid; gap: 20px; padding-left: 26px; }
#updates::before {
    content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px;
    border-left: 2px dashed rgba(211,160,120,.55);
}

.update {
    position: relative;
    padding: 20px 22px 22px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 8px 20px -10px rgba(72,51,42,.22);
    transition: transform .25s, box-shadow .25s;
}
.update:hover { transform: translateY(-3px); box-shadow: 0 16px 28px -12px rgba(72,51,42,.28); }
.update::before {
    content: "";
    position: absolute; left: -27px; top: 26px;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--mint); border: 3px solid var(--paper);
    box-shadow: 0 0 0 2px var(--mint-dark);
}
.update:nth-child(3n+2)::before { background: var(--pink); box-shadow: 0 0 0 2px var(--pink-dark); }
.update:nth-child(3n)::before   { background: var(--dulce-light); box-shadow: 0 0 0 2px var(--dulce-dark); }

.update h3 { margin: 0; color: var(--choco); font-family: var(--font-head); font-size: 21px; }
.update small { display: inline-block; margin: 4px 0 10px; padding: 2px 10px; border-radius: 999px; background: var(--cream); color: var(--soft); font-size: 12px; font-weight: 700; }
.update > p { margin: 0 0 14px; white-space: pre-line; }

.update-image, .update-video { display: block; width: 100%; max-height: 520px; object-fit: contain; margin-top: 6px; border-radius: 14px; background: var(--cream); border: 1px solid var(--line); }
.update-image { cursor: zoom-in; }

.download-button {
    margin-top: 14px; padding: 10px 18px;
    border: 0; border-radius: 999px; cursor: pointer;
    background: var(--choco); color: #fff; font-weight: 800; font-size: 14px;
    transition: transform .2s, background .2s;
}
.download-button:hover { background: var(--mint-dark); transform: translateY(-2px); }
.download-button:disabled { opacity: .7; cursor: wait; transform: none; }

.loading-card, .empty-state {
    padding: 34px 20px; text-align: center; color: var(--soft);
    border: 2px dashed rgba(211,160,120,.45); border-radius: 18px; background: rgba(255,255,255,.6);
}
.loading-card div { font-size: 38px; animation: bob 2s ease-in-out infinite; }
.loading-card p { margin: 6px 0 0; }

/* ---------- footer ---------- */
.footer { margin-top: 38px; text-align: center; color: var(--soft); }
.footer p { margin: 0 0 4px; font-weight: 700; }
.footer span { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }

/* ---------- comments ---------- */
.comments { margin-top: 20px; padding-top: 16px; border-top: 2px dashed rgba(211,160,120,.45); }
.comments h4 { margin: 0 0 12px; color: var(--choco); font-family: var(--font-head); font-size: 16px; }

.comment-list { display: grid; gap: 10px; margin-bottom: 14px; }
.comment { padding: 10px 14px; border-radius: 4px 16px 16px 16px; background: var(--pink-light); }
.comment-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.comment-meta strong { color: var(--pink-dark); font-size: 13px; }
.comment-meta small { margin: 0; padding: 0; background: none; color: var(--soft); font-size: 11px; }
.comment p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.comment-empty { margin: 0; color: var(--soft); font-size: 14px; }

.comment-form textarea { min-height: 70px; }
.emoji-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.emoji-button {
    width: 38px; height: 38px; padding: 0;
    border: 1.5px solid var(--line); border-radius: 12px;
    background: #fff; box-shadow: none; font-size: 19px; line-height: 1;
}
.emoji-button:hover { background: var(--mint-light); transform: translateY(-2px) scale(1.1); filter: none; }

.comment-footer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.char-count { color: var(--soft); font-size: 12px; font-weight: 700; }
.comment-feedback { flex: 1; color: var(--mint-dark); font-size: 13px; font-weight: 700; }
.comment-send { margin-left: auto; }

.comment-delete { margin-left: auto; padding: 2px 8px; background: none; box-shadow: none; color: inherit; font-size: 14px; }
.comment-delete:hover { background: rgba(194,99,125,.15); filter: none; }

/* =========================================================
   LOGIN + ADMIN PAGES
   ========================================================= */
.admin-page header { text-align: center; padding: 44px 20px 10px; }
.admin-page header h1 { margin: 0; color: var(--choco); font-family: var(--font-head); font-size: clamp(32px, 6vw, 46px); }
.admin-page header p { margin: 6px 0 0; color: var(--soft); font-weight: 700; }
.admin-page main { width: min(720px, calc(100% - 32px)); margin: 24px auto 60px; }

.commission {
    margin-bottom: 20px; padding: 30px 32px;
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow);
}
.commission h2 { margin-bottom: 14px; font-size: 24px; }
.commission h3 { margin: 0 0 8px; font-family: var(--font-head); color: var(--choco); }
.commission p { margin: 6px 0; }
article.commission { background: #fff; padding: 24px; border-radius: 18px; box-shadow: 0 8px 20px -10px rgba(72,51,42,.22); }

.admin-header { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.admin-header p { color: var(--soft); font-weight: 700; font-size: 14px; }
hr { margin: 28px 0; border: 0; border-top: 2px dashed rgba(211,160,120,.45); }

label { display: block; margin: 16px 0 6px; color: var(--choco); font-size: 13px; font-weight: 800; }

input, textarea, select {
    width: 100%; padding: 12px 14px;
    color: var(--text); background: #fff;
    border: 1.5px solid rgba(96,65,55,.18); border-radius: 12px;
    transition: border-color .2s, box-shadow .2s;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--mint-dark); box-shadow: 0 0 0 4px rgba(155,220,202,.4); }
input[type="file"] { padding: 10px; background: var(--cream); }
textarea { min-height: 110px; resize: vertical; }

button {
    padding: 11px 20px;
    border: 0; border-radius: 999px; cursor: pointer;
    color: #fff; font-weight: 800; font-size: 14px;
    background: linear-gradient(135deg, var(--mint-dark), #5aa891);
    box-shadow: 0 6px 14px -6px rgba(70,141,122,.7);
    transition: transform .2s, box-shadow .2s, filter .2s;
}
button:hover { transform: translateY(-2px); filter: brightness(1.05); }
button:disabled { opacity: .6; cursor: wait; transform: none; }
.new-update > button, .commission > button, #loginButton { margin-top: 20px; }
#loginButton { width: 100%; padding: 13px; }
#loginMessage { min-height: 24px; margin-top: 14px; text-align: center; font-weight: 700; color: var(--pink-dark); }

.admin-commission-buttons, .admin-update-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.select-commission, .copy-commission-link { background: linear-gradient(135deg, var(--dulce), var(--dulce-dark)); box-shadow: 0 6px 14px -6px rgba(150,96,74,.7); }
.delete-commission, .delete-update, #logoutButton { background: linear-gradient(135deg, #e58aa0, var(--pink-dark)); box-shadow: 0 6px 14px -6px rgba(194,99,125,.7); }

#commissionsList, #updates.admin-list { display: block; padding: 0; }
.admin-page #updates { padding-left: 0; display: block; }
.admin-page #updates::before { display: none; }
.admin-page .update { margin-bottom: 16px; }
.admin-page .update::before { display: none; }

@media (max-width: 640px) {
    .hero { padding: 26px 22px; }
    .hero-mascot { margin-top: -30px; }
    .commission-card { padding: 34px 22px 36px; }
    #updates { padding-left: 20px; }
    .update::before { left: -21px; }
    .commission { padding: 22px 18px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- floating background decorations (background.js) ---------- */
.page-background { --decor-scale: 1; }

.bg-decor {
    position: absolute;
    width: calc(var(--size, 140) * 1px * var(--decor-scale));
    height: auto;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
    transition: opacity 1.4s ease;
    animation: decorLava var(--dur, 16s) ease-in-out var(--delay, 0s) infinite alternate;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform;
}
.bg-decor.show { opacity: var(--op, .5); }

/* lava-lamp drift: wanders sideways/up-down while squishing like a blob */
@keyframes decorLava {
    0%   { transform: translate(-50%, -50%) translate(calc(var(--dx) * -1), calc(var(--dy) * .6))
                      rotate(calc(var(--rot) - 4deg)) scale(1, 1); }
    33%  { transform: translate(-50%, -50%) translate(calc(var(--dx) * .3), calc(var(--dy) * -1))
                      rotate(var(--rot)) scale(1.06, .94); }
    66%  { transform: translate(-50%, -50%) translate(calc(var(--dx) * .8), calc(var(--dy) * .4))
                      rotate(calc(var(--rot) + 3deg)) scale(.95, 1.06); }
    100% { transform: translate(-50%, -50%) translate(var(--dx), calc(var(--dy) * -.6))
                      rotate(calc(var(--rot) + 4deg)) scale(1.04, .97); }
}

@media (max-width: 700px) {
    .page-background { --decor-scale: .6; }
}

/* ---------- background decoration: color effects (background.js) ---------- */
.bg-decor img { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; -webkit-user-drag: none; }

.fx-white img { filter: brightness(0) invert(1) drop-shadow(0 0 4px rgba(120,90,80,.5)); }
.fx-dark  img { filter: brightness(0); }

/* rainbow (silhouette) and hue (keeps drawing): colors keep cycling */
.fx-rainbow, .fx-hue {
    animation:
        decorLava var(--dur, 16s) ease-in-out var(--delay, 0s) infinite alternate,
        hueSpin var(--fxspeed, 9s) linear infinite;
}
.fx-hue img { filter: saturate(1.5); }
@keyframes hueSpin {
    from { filter: hue-rotate(0deg); }
    to   { filter: hue-rotate(360deg); }
}

/* glow: soft pulsing halo */
.fx-glow { --glow: #ffb3d1; }
.fx-glow img {
    filter: drop-shadow(0 0 6px var(--glow)) drop-shadow(0 0 18px var(--glow)) brightness(1);
    animation: glowPulse 3s ease-in-out infinite alternate;
}
@keyframes glowPulse {
    to { filter: drop-shadow(0 0 12px var(--glow)) drop-shadow(0 0 34px var(--glow)) brightness(1.2); }
}

/* metal = keeps the ORIGINAL colors, only the shine sweeps across */
.fx-metal img { filter: drop-shadow(0 2px 3px rgba(0,0,0,.2)); }
/* silver = grey metallic tone + shine */
.fx-silver img { filter: grayscale(1) contrast(1.7) brightness(1.15) drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.fx-gold  img { filter: sepia(1) saturate(2.6) hue-rotate(-12deg) contrast(1.25) brightness(1.1) drop-shadow(0 2px 3px rgba(80,50,0,.3)); }

.fx-metal::after, .fx-silver::after, .fx-gold::after {
    content: "";
    position: absolute; inset: 0;
    -webkit-mask: var(--img) center / contain no-repeat;
            mask: var(--img) center / contain no-repeat;
    background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.95) 50%, transparent 65%);
    background-size: 250% 100%;
    animation: shineSweep 3.6s linear var(--shine-delay, 0s) infinite;
    pointer-events: none;
}
@keyframes shineSweep {
    from { background-position: 150% 0; }
    to   { background-position: -50% 0; }
}