:root {
  --color-text: #242832;
  --color-muted: #596579;
  --color-page: #f7f9fc;
  --color-surface: #fff;
  --color-border: #c7cbd1;
  --color-brand: #ff3345;
  --color-brand-hover: #e52638;
  --color-link: #0073d3;
  --radius-control: 4px;
  --radius-panel: 6px;
  font-family: Arial, 'Yu Gothic', sans-serif;
  font-size: 15px;
  color: var(--color-text);
  background: var(--color-page);
}
* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
a { color: var(--color-link); text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
header a { color: inherit; text-decoration: none; }
header .brand:hover { text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: var(--color-brand);
  color: #fff;
  cursor: pointer;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
}
button:hover, .button:hover { background: var(--color-brand-hover); text-decoration: none; }
button:disabled, .button[aria-disabled=true] { opacity: .5; cursor: default; }
button:disabled:hover { background: var(--color-brand); }
.secondary {
  border-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}
.secondary:hover, .secondary:disabled:hover { background: #edf0f4; }
.button-link {
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-link);
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.button-link:hover { background: transparent; color: #005cab; }
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 3px;
}
main { max-width: 1150px; margin: auto; padding: 40px 24px 64px; }
h1 { font-size: 26px; line-height: 1.45; letter-spacing: 0; margin: 12px 0 24px; }
h2 { font-size: 20px; line-height: 1.5; margin: 0 0 16px; }
h3 { font-size: 17px; line-height: 1.5; }
p { line-height: 1.8; overflow-wrap: anywhere; }
.muted { color: var(--color-muted); }
.eyebrow { font-size: 11px; letter-spacing: 2px; color: var(--color-muted); }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; }
.panel, .item {
  background: var(--color-surface);
  border: 1px solid #e0e3e7;
  border-radius: var(--radius-panel);
  padding: 24px;
  margin-bottom: 24px;
  min-width: 0;
}
label { display: block; font-size: 13px; margin: 16px 0 8px; font-weight: 600; }
:where(input:not([type=checkbox]):not([type=radio])), select, textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  padding: 12px;
  background: var(--color-surface);
  color: var(--color-text);
}
textarea { min-height: 112px; resize: vertical; line-height: 1.7; }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; flex: 0 0 18px; accent-color: var(--color-brand); }
input[type=color] { height: 44px; padding: 4px !important; }
input[type=file] { font-size: 13px; padding: 8px !important; }
input[type=file]::file-selector-button { padding: 8px 12px; margin-right: 12px; border: 1px solid var(--color-border); border-radius: 4px; background: #fff; color: var(--color-text); cursor: pointer; font: inherit; }
.row { display: flex; gap: 16px; }
.row > * { flex: 1; min-width: 0; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; align-items: center; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; line-height: 1.7; }
.check input { margin-top: 4px; }
.notice { font-size: 13px; line-height: 1.7; padding: 12px 16px; border-radius: 4px; background: #fff6de; color: #6d5625; }
.error { color: #c5283d; font-size: 14px; }
.error:empty { display: none; }
.success { background: #f0f7f2; color: #28623a; border: 1px solid #d6e7db; border-radius: 4px; padding: 16px; margin: 16px 0; }
footer { font-size: 12px; color: var(--color-muted); margin-top: 24px; }
.prize-edit { display: grid; grid-template-columns: minmax(0, 1fr) 65px 70px; gap: 8px; margin-top: 12px; }
.collection { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 20px; }
.item h3 { margin: 12px 0; }
.badge { display: inline-block; font-size: 11px; background: #edf0f4; color: var(--color-muted); border-radius: 4px; padding: 6px 10px; }
/* Creator-controlled BOX artwork keeps its own colors; platform controls use the shared theme. */
.phone { border: 8px solid #30343b; border-radius: 28px; overflow: hidden; background: #fff; align-self: start; }
.store { background: var(--bg); color: #243d38; padding: 24px; background-image: var(--bgimg); background-size: cover; }
.store.night { color: #fff; }
.store.pop { border-top: 8px solid var(--accent); }
.store button { width: 100%; background: var(--accent); }
.store .badge { background: #ffffffd9; color: #243d38; }
.store h2 { font-size: 25px; margin: 4px 0; }
.creator { display: flex; gap: 8px; align-items: center; font-size: 12px; }
.creator img { width: 32px; height: 32px; }
.hero { width: 100%; aspect-ratio: 1.3; object-fit: cover; border-radius: 8px; margin: 16px 0; }
.price { font-size: 27px; font-weight: 700; margin: 12px 0; }
.price small { font-size: 12px; font-weight: 400; }
.details { padding: 24px; background: #fff; color: var(--color-text); }
.prize { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid #e0e3e7; }
.rank { font-weight: 600; color: var(--color-muted); }
.buyer { max-width: 430px; margin: auto; }
.buyer .phone { border: 0; border-radius: 6px; }
@media (max-width: 760px) {
  main { padding: 24px 16px 48px; }
  h1 { font-size: 22px; }
  h2 { font-size: 18px; }
  .layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .phone { max-width: 400px; width: 100%; margin: auto; }
  .panel, .item { padding: 20px; margin-bottom: 20px; }
  .row { flex-wrap: wrap; gap: 12px; }
  .row > * { flex-basis: 40%; }
}

/* BOX likes use a plain heart and count alongside product details. */
.box-like{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 12px;background:#fff;color:#59616b;border:1px solid #d8dce1;border-radius:6px;font-size:13px;margin:0 0 16px;box-shadow:none}
.box-like svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7}
.box-like[aria-pressed="true"]{color:#ff334b;background:#fff5f6;border-color:#ffc4cc}
.box-like[aria-pressed="true"] svg{fill:currentColor}
.box-like:disabled{opacity:.65}
.box-like:hover:not(:disabled){background:#fff5f6;color:#ff334b}
.like-count{font-variant-numeric:tabular-nums}
.liked-box{min-width:0}.liked-box .box-like{margin:8px 0 20px}.liked-box .gacha-card p{font-size:12px;color:#67717d}

.catalog-box{min-width:0}.catalog-box .box-like{display:flex;width:max-content;margin:4px 0 10px auto;border:0;background:transparent;padding:4px 0;min-height:36px;gap:5px}.catalog-box .box-like span:not(.like-count){display:none}

.shop-follow-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;background:#fff;font-size:13px}.shop-follow-bar p:empty{display:none}.shop-follow-bar label{display:flex;align-items:center;gap:6px;font-size:13px}.shop-follow-bar input{width:auto}.following-shop{padding:16px 0;border-bottom:1px solid #e0e3e7}.shop-follow-bar small{color:#596579}

.shop-rating{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px;line-height:1.7;margin:8px 0 16px}.shop-rating-star{color:#b57700;font-size:18px}.shop-rating-empty{font-size:13px}.shop-rating-empty>span{font-size:18px}.shop-rating-other{font-size:12px}

.save-box-dialog{width:min(480px,calc(100vw - 24px));max-height:85dvh;overflow:auto;padding:24px;border:1px solid #dce1e6;border-radius:12px}.save-box-dialog::backdrop{background:#0006}.save-box-choices{display:flex;flex-direction:column;gap:12px;margin:16px 0}.save-box-choices label{display:flex;align-items:center;gap:8px}.save-box-choices input{width:auto}.save-box-dialog details{margin:20px 0}.save-box-dialog h2{font-size:20px}.header-todo-panel{position:fixed;inset:auto;margin:0;padding:0;border:1px solid #dce1e6;border-radius:6px;background:#fff;box-shadow:0 4px 18px #17202b26;max-height:65dvh;overflow:auto;color:#17202b}.header-todo-panel h2{font-size:16px;margin:0;padding:16px;border-bottom:1px solid #e0e3e7}.header-todo-panel p{padding:0 16px}.header-todo-panel a{display:block;padding:14px 16px;color:inherit;border-bottom:1px solid #e0e3e7;text-decoration:none}.header-todo-panel a:hover{background:#f5f7f9}.header-todo-panel small{display:block;color:#596579;margin-top:4px}.header-todo-panel .todo-show-all{text-align:center;font-size:13px;color:#0866c5}#header-todos{position:relative}

.production-policy-links{padding:24px;text-align:center}.flow-card input,.flow-card textarea,.flow-card select,.flow-history textarea,.queue-search input,.queue-search select{max-width:100%;box-sizing:border-box}.flow-history textarea{display:block;width:100%}.queue-search{display:flex;flex-wrap:wrap;gap:12px;align-items:end}.creator-bio{overflow-wrap:anywhere;white-space:pre-wrap}#operator-user{overflow-wrap:anywhere}

.account-id{display:block;white-space:normal;overflow-wrap:anywhere;word-break:break-all}.profile-fields dd{min-width:0}#copy-account-status{display:block;margin-top:8px}#support-refresh-status{min-height:1.4em}.flow-history [role="alert"] a{display:inline-block;margin-top:8px}