:root {
  color-scheme: dark;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #ececf1;
  background: #212121;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --page: #212121;
  --panel: #2a2a2a;
  --panel-raised: #303030;
  --field: #252525;
  --text: #ececf1;
  --muted: #a1a1aa;
  --border: #3b3b3b;
  --accent: #d74466;
  --accent-hover: #e25575;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--page); scroll-behavior: smooth; }
body { min-height: 100vh; margin: 0; color: var(--text); background: var(--page); }
main { max-width: 1100px; margin: 3rem auto; padding: 0 1.5rem 7rem; }
h1, h2, h3, h4 { color: var(--text); }
h1 { margin-bottom: .2rem; font-size: 2rem; letter-spacing: -.025em; }
h2 { margin-top: 0; }
h3 { font-size: 1.15rem; }
.subtitle { color: var(--muted); margin-top: 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
article { min-width: 0; color: var(--text); background: var(--panel-raised); border: 1px solid var(--border); border-radius: .75rem; padding: 1.25rem; box-shadow: 0 2px 10px #00000020; }
article span { display: block; color: var(--muted); }
article strong { display: block; color: var(--text); font-size: 2rem; margin-top: .5rem; }
.etsy-connection { margin-top: 1.5rem; color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: .75rem; padding: 1.25rem; box-shadow: 0 2px 10px #00000020; }
form { display: inline-block; margin: .25rem .5rem .25rem 0; }
button, .button { border: 1px solid transparent; border-radius: .5rem; background: var(--accent); color: #fff; cursor: pointer; display: inline-block; padding: .65rem .9rem; text-decoration: none; font: inherit; transition: background-color .15s ease, border-color .15s ease; }
button:hover, .button:hover { background: var(--accent-hover); }
button:focus-visible, .button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid #f28ca2; outline-offset: 2px; }
button:disabled { opacity: .6; cursor: wait; }
button.secondary { background: #414149; border-color: #51515a; }
button.secondary:hover { background: #50505a; }
.notice { border: 1px solid var(--border); border-radius: .5rem; padding: .7rem; color: var(--text); background: var(--panel-raised); }
.success { background: #173326; border-color: #28523c; color: #b8e5c8; }
.error { background: #3a2228; border-color: #63313c; color: #ffc3ce; }
.board-list { padding-left: 1.2rem; }
code { color: #e6e6eb; background: #202024; border: 1px solid var(--border); border-radius: .25rem; padding: .1rem .25rem; }
a { color: #f08aa0; }
a:hover { color: #ffb2c1; }
.creative-list { display: grid; gap: 1rem; margin-top: 1rem; }
.dashboard-actions { display: flex; justify-content: flex-end; margin: 1.25rem 0 2rem; }
.generated-open-button { display: inline-flex; align-items: center; gap: .65rem; padding: .7rem 1rem; background: #303036; border-color: #44444d; }
.generated-open-button:hover { background: #3a3a42; }
.generated-count { display: inline-grid; min-width: 1.5rem; height: 1.5rem; place-items: center; border-radius: 999px; background: #484850; font-size: .8rem; }
.generated-dialog { width: min(1100px, calc(100vw - 2rem)); max-width: none; max-height: min(88dvh, 900px); padding: 0; overflow: auto; color: var(--text); background: var(--panel); border: 1px solid #45454d; border-radius: 1rem; box-shadow: 0 24px 90px #0009; }
.generated-dialog::backdrop { background: #101014bd; backdrop-filter: blur(4px); }
.generated-panel { padding: clamp(1rem, 3vw, 1.75rem); }
.generated-header { position: sticky; z-index: 1; top: calc(-1 * clamp(1rem, 3vw, 1.75rem)); display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin: calc(-1 * clamp(1rem, 3vw, 1.75rem)) calc(-1 * clamp(1rem, 3vw, 1.75rem)) 1rem; padding: clamp(1rem, 3vw, 1.75rem); background: var(--panel); border-bottom: 1px solid var(--border); }
.generated-header h2 { margin: 0; }
.generated-header .subtitle { margin-bottom: .25rem; }
.generated-close { width: 2.5rem; height: 2.5rem; padding: 0; font-size: 1.5rem; line-height: 1; }
.creative-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; }
.creative-item > summary { display: flex; align-items: center; gap: 1rem; min-height: 166px; cursor: pointer; list-style: none; }
.creative-item > summary::-webkit-details-marker { display: none; }
.creative-item > summary::after { content: "⌄"; align-self: flex-start; margin-left: auto; color: var(--muted); }
.creative-item[open] > summary::after { content: "⌃"; }
.creative-item .creative-image { flex: 0 0 112px; width: 112px; height: 150px; margin: 0; aspect-ratio: auto; object-fit: cover; background: var(--field); }
.creative-image-placeholder { display: grid !important; flex: 0 0 112px; width: 112px; height: 150px; place-items: center; padding: .5rem; color: var(--muted) !important; background: var(--field); border: 1px solid var(--border); border-radius: .75rem; text-align: center; }
.creative-detail-image { display: block; width: 100%; max-width: 380px; max-height: 440px; margin: .75rem auto 1rem; object-fit: contain; background: var(--field); border: 1px solid var(--border); border-radius: .75rem; }
.creative-summary { min-width: 0; }
.creative-summary strong { margin: 0 0 .45rem; font-size: 1rem; overflow-wrap: anywhere; }
.creative-summary span { margin-top: .25rem; font-size: .85rem; overflow-wrap: anywhere; }
.creative-detail { padding-top: .75rem; border-top: 1px solid var(--border); }
.generated-empty { padding: 2rem 1rem; text-align: center; }
.page-scroll-toggle { position: fixed; z-index: 20; right: max(1.25rem, env(safe-area-inset-right)); bottom: max(1.25rem, env(safe-area-inset-bottom)); display: grid; width: 3rem; height: 3rem; place-items: center; padding: 0; color: var(--text); background: #35353b; border: 1px solid #55555f; border-radius: 50%; box-shadow: 0 5px 20px #0008; font-size: 1.45rem; line-height: 1; }
.page-scroll-toggle:hover { background: #45454d; border-color: #696974; }
.page-scroll-toggle span { display: block; margin: 0; color: inherit; font-size: inherit; }
.page-scroll-toggle[hidden] { display: none; }
.creative-card h3 { margin-bottom: .35rem; }
.creative-card.creative-mockup { border-left: .35rem solid #258b72; }
.creative-card.creative-ai { border-left: .35rem solid #8b76d7; }
label { display: inline-grid; gap: .35rem; margin: .25rem .5rem .5rem 0; color: var(--muted); }
input, textarea, select { color-scheme: dark; color: var(--text); background: var(--field); border: 1px solid #48484f; border-radius: .4rem; font: inherit; padding: .5rem .6rem; }
input::placeholder, textarea::placeholder { color: #888891; }
select option { color: var(--text); background: var(--panel); }
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .8; }
textarea { min-height: 4rem; min-width: 20rem; }
.creative-edit-form { display: block; margin-top: .75rem; }

.analytics-dashboard { max-width: 100%; overflow: hidden; }
.analytics-dashboard h3 { margin: 1.75rem 0 .75rem; }
.analytics-dashboard h4 { margin: 0 0 .75rem; }
.analytics-filters { display: flex; flex-wrap: wrap; align-items: end; gap: .4rem; }
.analytics-filters label { min-width: 130px; }
.analytics-kpis { grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); margin-top: .75rem; }
.analytics-kpis article { padding: .9rem; }
.analytics-kpis article strong { font-size: 1.35rem; overflow-wrap: anywhere; }
.analytics-charts, .analytics-dimensions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 1rem; }
.analytics-chart { padding: 1rem; background: var(--panel-raised); }
.analytics-chart ul { list-style: none; padding: 0; margin: 0; }
.analytics-chart li { display: grid; grid-template-columns: 6.2rem minmax(4rem, 1fr) auto; align-items: center; gap: .6rem; margin: .4rem 0; color: var(--text); font-size: .9rem; }
.chart-track { height: .7rem; border-radius: 1rem; background: #414149; overflow: hidden; }
.chart-bar { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.unavailable { color: #b2b2bb; font-style: italic; }
.analytics-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: .5rem; }
.analytics-dashboard table { width: 100%; border-collapse: collapse; color: var(--text); background: var(--panel-raised); }
.analytics-dashboard th, .analytics-dashboard td { padding: .65rem .75rem; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
.analytics-dashboard th { color: #c4c4cc; background: #29292d; font-weight: 600; }
.analytics-dashboard tbody tr:last-child td { border-bottom: 0; }
.analytics-dashboard tbody tr:hover { background: #35353a; }
.analytics-dimensions > article { min-width: 0; }
.analytics-pagination { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; margin-top: .75rem; color: var(--muted); }
.analytics-pagination a { color: #f08aa0; }

@media (max-width: 600px) {
  main { margin: 2rem auto; padding: 0 1rem 6rem; }
  .analytics-chart li { grid-template-columns: 5.5rem minmax(2rem, 1fr) auto; gap: .4rem; }
  textarea { min-width: min(20rem, 75vw); }
  .dashboard-actions { justify-content: stretch; }
  .generated-open-button { width: 100%; justify-content: center; }
  .generated-dialog { width: calc(100vw - 1rem); max-height: 92dvh; border-radius: .8rem; }
  .creative-item > summary { gap: .75rem; }
  .page-scroll-toggle { right: max(.85rem, env(safe-area-inset-right)); bottom: max(.85rem, env(safe-area-inset-bottom)); width: 2.85rem; height: 2.85rem; }
}

.creative-image { width: 100%; max-width: 420px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 12px; display: block; margin: .75rem 0 1rem; }