[hidden] { display: none !important; }
.ava-edit-link { position: fixed; right: 18px; bottom: 18px; z-index: 70; padding: 12px 20px; border-radius: 999px; background: var(--hot); color: var(--on-hot, #09090b); font-weight: 600; font-size: 14px; text-decoration: none; box-shadow: 0 8px 26px rgba(0,0,0,.25); }
.ava-panel { --ink: #09090b; --mid: #52525b; --soft: #71717a; --line: #e4e4e7; --pale: #d4d4d8; --hot: #e8890c; --sans: system-ui, -apple-system, "Segoe UI", sans-serif; --mono: ui-monospace, Menlo, monospace; position: fixed; right: 14px; top: 14px; bottom: 14px; z-index: 75; display: flex; flex-direction: column; width: min(340px, calc(100vw - 28px)); background: #fff; color: var(--ink); border: 1px solid var(--ink); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.28); font: 14px/1.45 var(--sans); }
.ava-panel.min { bottom: auto; }
.ava-panel.min .ava-scroll, .ava-panel.min .ava-status, .ava-panel.min .ava-actions { display: none; }
.ava-top { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.ava-top button { width: 30px; height: 30px; margin: 0; padding: 0; }
.ava-scroll { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 4px 16px 16px; }
.ava-panel h3 { margin: 18px 0 6px; font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mid); }
.ava-tip { margin: 6px 0; color: var(--soft); font-size: 12.5px; }
.ava-panel label { display: block; margin: 8px 0; font-size: 13px; font-weight: 500; }
.ava-panel input:not([type=checkbox]):not([type=file]), .ava-panel textarea, .ava-w { display: block; width: 100%; margin-top: 3px; padding: 7px 9px; border: 1px solid var(--pale); border-radius: 6px; background: #fff; color: var(--ink); font: 400 14px var(--sans); }
.ava-panel input[type=file] { max-width: 100%; margin: 6px 0; font-size: 12px; }
.ava-panel textarea { min-height: 70px; resize: vertical; }
.ava-panel button { margin: 4px 4px 4px 0; padding: 7px 12px; border: 1px solid var(--pale); border-radius: 7px; background: #fff; color: var(--ink); font: 500 13px var(--sans); cursor: pointer; }
.ava-panel button:hover { border-color: var(--ink); }
.ava-check { display: flex !important; gap: 8px; align-items: center; margin: 5px 0 !important; font-weight: 400 !important; }
.ava-panel details { border-top: 1px solid var(--line); padding: 8px 0; }
.ava-panel summary { cursor: pointer; font-weight: 600; }
.ava-status { min-height: 1.5em; margin: 0; padding: 4px 16px 0; font-size: 12.5px; color: var(--mid); border-top: 1px solid var(--line); }
.ava-status.bad { color: #b42318; }
.ava-actions { display: flex; padding: 6px 16px 12px; }
.ava-actions .ava-primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.ava-edit [contenteditable=true] { outline: 1px dashed transparent; outline-offset: 3px; cursor: text; transition: outline-color .15s; }
.ava-edit [contenteditable=true]:hover { outline-color: var(--hot); }
.ava-edit [contenteditable=true]:focus { outline: 2px solid var(--hot); }
.ava-img { position: relative; cursor: pointer; }
.ava-img::after { content: attr(data-hint); position: absolute; left: 12px; top: 12px; padding: 6px 12px; border-radius: 999px; background: var(--ink); color: #fff; font: 500 12px var(--sans); }
.ava-removable { position: relative; }
.ava-x { position: absolute; right: 4px; top: 4px; z-index: 3; width: 24px; height: 24px; padding: 0; border: 1px solid #09090b; border-radius: 50%; background: #fff; color: #09090b; line-height: 1; cursor: pointer; }
.ava-x:hover { background: #e8890c; }
.ava-colors { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin: 6px 0; }
.ava-swatch { display: flex; gap: 2px; padding: 6px; align-items: center; }
.ava-swatch i { flex: 1; height: 22px; border: 1px solid #0002; }
.ava-picks { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.ava-picks label { margin: 0; font-size: 12px; }
.ava-picks input { display: block; width: 100%; height: 34px; padding: 2px !important; margin-top: 3px; }
.ava-edit .band { white-space: normal; font-size: clamp(1.6rem, 3vw, 2.6rem); width: auto; }
.ava-edit .band.pale { margin-left: 0; }
.ava-edit .card { cursor: pointer; }
.uploaded-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(16px, 2vw, 32px); margin-top: clamp(28px, 4vw, 56px); }
.uploaded-grid figure { min-width: 0; }
.uploaded-grid video { width: 100%; background: var(--ink); aspect-ratio: 16 / 9; }
.uploaded-grid figcaption { margin-top: 10px; font-weight: 600; }
@media (max-width: 760px) { .ava-panel { top: auto; bottom: 8px; right: 8px; left: 8px; width: auto; max-height: 58vh; } .ava-panel.min { bottom: 8px; } body.ava-edit { padding-bottom: 60vh; } body.ava-edit:has(.ava-panel.min) { padding-bottom: 72px; } .ava-panel button, .ava-panel input:not([type=checkbox]):not([type=file]), .ava-panel select, .ava-panel textarea { min-height: 40px; font-size: 16px; } .ava-x { width: 32px; height: 32px; } .ava-top button { width: 40px; height: 40px; } }
.ava-finish { flex: none; margin: 0 16px 14px !important; padding: 12px !important; border: 0 !important; background: var(--hot) !important; color: #111 !important; font-weight: 700 !important; }
.ava-review { width: min(560px, 92vw); max-height: 86vh; padding: 26px; border: 0; border-radius: 16px; background: #fff; color: #09090b; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
.ava-review::backdrop { background: rgba(0,0,0,.6); }
.ava-review h2 { margin: 0 0 8px; font-size: 1.5rem; }
.ava-review p { margin: 8px 0; color: #52525b; }
.ava-review button { margin: 6px 6px 0 0; padding: 10px 16px; border: 1px solid #d4d4d8; border-radius: 8px; background: #fff; color: #09090b; font: 600 14px system-ui, sans-serif; cursor: pointer; }
.ava-review .ava-primary { background: #09090b; color: #fff; border-color: #09090b; }
.ava-review button:disabled { opacity: .45; cursor: not-allowed; }
.ava-issues { margin: 10px 0; padding: 0; list-style: none; }
.ava-issues button { display: block; width: 100%; margin: 0 0 6px; text-align: left; font-weight: 500; }
.ava-check { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0; }
@media print { .ava-panel, .ava-edit-link { display: none; } }