:root {
  color-scheme: light;
  --blue: #1677ff;
  --blue-dark: #0958d9;
  --blue-soft: #eff6ff;
  --ink: #0f172a;
  --muted: #64748b;
  --border: #cbd5e1;
  --surface: #f8fafc;
  --white: #fff;
  --danger: #dc2626;
  --danger-soft: #fff1f2;
  --success: #15803d;
  --success-soft: #f0fdf4;
  --content-width: 42rem;
  font-family: system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; background: var(--surface); color: var(--ink); }
body { min-height: 100vh; margin: 0; background: var(--surface); font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button, a, summary, input[type="file"] { -webkit-tap-highlight-color: transparent; }
a { color: var(--blue-dark); text-underline-offset: .18em; }
:focus-visible { outline: 3px solid #facc15; outline-offset: 2px; }
h1, h2, p { margin-top: 0; }
h1, h2 { line-height: 1.25; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.125rem; }

.app-header { background: var(--blue); color: var(--white); }
.header-inner {
  display: flex; width: min(100%, var(--content-width)); min-height: 4.5rem; margin: 0 auto;
  padding: .75rem 1.125rem; align-items: center; justify-content: space-between; gap: .75rem;
}
.brand { display: inline-flex; min-height: 44px; padding: .25rem 0; flex-direction: column; align-items: center; justify-content: center; color: var(--white); text-decoration: none; }
.brand small { font-size: .7rem; line-height: 1.1; opacity: .82; }
.brand strong { font-size: 1.05rem; line-height: 1.35; }
.page-back { display: inline-flex; min-width: 1rem; min-height: 44px; align-items: center; justify-content: flex-start; }
.page-back { color: var(--white); font-size: 2rem; line-height: 1; text-decoration: none; }
.page-title { margin-right: auto; font-size: 1.05rem; }
.header-spacer { display: none; }
.account-menu { position: relative; }
.account-menu summary { display: flex; min-height: 44px; padding: .5rem .25rem; align-items: center; cursor: pointer; color: var(--white); font-size: .78rem; font-weight: 650; list-style: none; }
.account-menu summary::-webkit-details-marker { display: none; }
.compact-menu summary { width: 44px; justify-content: flex-end; font-size: 1.5rem; }
.account-panel { position: absolute; z-index: 20; top: calc(100% + .25rem); right: 0; width: 11rem; padding: .5rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--white); box-shadow: 0 8px 20px rgba(15,23,42,.14); color: var(--ink); }
.account-panel a { display: block; min-height: 44px; padding: .65rem .5rem; }
.account-name { display: block; padding: .5rem; color: var(--muted); font-size: .875rem; overflow-wrap: anywhere; }
.text-button { width: 100%; min-height: 44px; padding: .5rem; border: 0; border-radius: .5rem; background: var(--surface); color: var(--ink); cursor: pointer; font-weight: 650; text-align: left; }

.app-main { width: min(100%, var(--content-width)); min-height: calc(100vh - 4.5rem); margin: 0 auto; padding: 1.125rem 1rem 2.5rem; background: var(--white); }
.menu-prompt { margin: 0 0 .875rem .125rem; color: var(--muted); font-size: .82rem; }
.home-actions { display: grid; gap: .8rem; }
.home-action { display: flex; min-height: 5.15rem; padding: .9rem 1rem; align-items: center; gap: .95rem; border: 1px solid var(--border); border-radius: .95rem; background: var(--surface); color: #334155; text-decoration: none; }
.home-action-search { border-color: #bfdbfe; background: var(--blue-soft); color: #1d4ed8; }
.home-action-create { border-color: #fecaca; background: var(--danger-soft); color: #be123c; }
.home-action-admin { background: var(--surface); }
.action-mark { display: grid; width: 2.65rem; height: 2.65rem; flex: 0 0 2.65rem; place-items: center; border-radius: .8rem; background: rgba(255,255,255,.8); font-weight: 800; }
.home-action > span:nth-child(2) { min-width: 0; flex: 1; }
.home-action strong, .home-action small { display: block; }
.home-action strong { margin-bottom: .2rem; font-size: 1.05rem; }
.home-action small { color: var(--muted); font-size: .76rem; }
.action-arrow { margin-left: auto; color: currentColor; font-size: 1.4rem; font-weight: 750; }

.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.page-heading { margin-bottom: 1.5rem; }
.page-heading p, .lead { color: var(--muted); }
.back-action { display: inline-flex; min-height: 44px; align-items: center; font-weight: 650; }

input, select { width: 100%; min-height: 48px; padding: .7rem .8rem; border: 1px solid #94a3b8; border-radius: .7rem; background: var(--white); color: var(--ink); font-size: 1rem; }
input::placeholder { color: #94a3b8; opacity: 1; }
input:focus { border-color: var(--blue); }
.button { display: inline-flex; min-height: 48px; padding: .7rem 1rem; align-items: center; justify-content: center; border: 1px solid var(--blue); border-radius: .7rem; cursor: pointer; font-weight: 750; line-height: 1.2; text-align: center; text-decoration: none; }
.button.primary { border-color: var(--blue); background: var(--blue); color: var(--white); box-shadow: 0 5px 12px rgba(22,119,255,.18); }
.button.secondary { background: var(--white); color: var(--blue-dark); }
.button.danger { border-color: #fca5a5; background: var(--white); color: var(--danger); }
.button:disabled { cursor: wait; opacity: .65; }
.button.is-loading { gap: .5rem; }
.button.is-loading::before {
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  content: "";
  animation: button-loading-spin .7s linear infinite;
}
@keyframes button-loading-spin { to { transform: rotate(360deg); } }
.full-width { width: 100%; }

.search-form { margin-bottom: .9rem; }
.search-controls { display: flex; align-items: stretch; gap: .5rem; }
.search-controls input { min-width: 0; background: var(--surface); }
.search-controls .button { flex: 0 0 auto; padding-inline: .9rem; }
.results-heading { display: flex; min-height: 2rem; margin-bottom: .45rem; align-items: center; justify-content: space-between; }
.results-heading h2 { display: none; }
.results-heading span { color: var(--muted); font-size: .72rem; }
.result-list { display: grid; margin: 0; padding: 0; gap: .6rem; list-style: none; }
.port-result { border: 1px solid #e2e8f0; border-radius: .8rem; overflow: hidden; }
.port-result a { display: flex; min-height: 4.55rem; padding: .75rem .8rem; flex-direction: column; justify-content: center; color: var(--ink); text-decoration: none; }
.port-result strong { margin-bottom: .28rem; font-size: .86rem; overflow-wrap: anywhere; }
.port-result span { color: var(--muted); font-size: .7rem; }
.port-result b { float: right; color: var(--blue); font-weight: 650; }
.empty-state { padding: 2rem 0; border-top: 1px solid #e2e8f0; }
.empty-state p { color: var(--muted); }
.pagination { display: flex; margin-top: 1rem; align-items: center; justify-content: space-between; gap: .75rem; }
.pagination span { color: var(--muted); font-size: .8rem; text-align: center; }

.form-stack { display: flex; flex-direction: column; gap: 1.05rem; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field label, .search-form label { color: var(--ink); font-size: .82rem; font-weight: 700; }
.field > small { color: var(--muted); font-size: .78rem; }
.photo-picker { position: relative; display: flex; min-height: 9.4rem; padding: 1.25rem .7rem; flex-direction: column; align-items: center; justify-content: center; border: 2px dashed #93c5fd; border-radius: .9rem; background: var(--blue-soft); color: #1d4ed8; text-align: center; overflow: hidden; }
.photo-picker-mark { font-size: 2rem; line-height: 1; }
.photo-picker strong { margin-top: .35rem; font-size: .85rem; }
.photo-picker small { margin-top: .25rem; color: var(--muted); font-size: .68rem; }
.photo-picker input[type="file"] { position: absolute; inset: 0; min-height: 100%; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.image-selection { overflow: hidden; border: 1px solid #bfdbfe; border-radius: .9rem; background: var(--blue-soft); }
.image-selection img { display: block; width: 100%; max-height: 15rem; object-fit: contain; }
.image-selection span { display: block; padding: .6rem; color: var(--muted); font-size: .75rem; text-align: center; overflow-wrap: anywhere; }
.form-actions { display: grid; grid-template-columns: .78fr 1.42fr; gap: .55rem; margin-top: .3rem; }
.form-hint { margin: -.55rem 0 0; color: var(--muted); font-size: .68rem; text-align: right; }
.error-summary, .success-summary { margin-bottom: 1rem; padding: .8rem 1rem; border-radius: .7rem; font-weight: 650; }
.error-summary { border: 1px solid #fca5a5; background: var(--danger-soft); color: var(--danger); }
.success-summary { border: 1px solid #86efac; background: var(--success-soft); color: var(--success); }

.detail-heading span { color: var(--muted); font-size: .7rem; }
.detail-heading h1 { margin: .2rem 0 0; font-size: 1.18rem; overflow-wrap: anywhere; }
.preview-figure { margin: 1rem 0 0; overflow: hidden; border: 1px solid var(--border); border-radius: .95rem; background: var(--surface); }
.preview-figure img { display: block; width: 100%; height: min(64vw, 17rem); object-fit: contain; background: var(--surface); }
.preview-figure figcaption { border-top: 1px solid #e2e8f0; background: var(--white); }
.preview-figure .button { width: 100%; min-height: 44px; border: 0; border-radius: 0; }
.audit-info { margin-top: .85rem; padding: .65rem .75rem; border-radius: .75rem; background: var(--surface); }
.audit-info dl { margin: 0; color: var(--muted); font-size: .7rem; line-height: 1.8; }
.audit-info dl div { display: flex; gap: .15rem; }
.audit-info dt, .audit-info dd { margin: 0; }
.detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-top: .9rem; }
.detail-actions form, .detail-actions form button { width: 100%; }
dialog { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: #0f172a; color: var(--white); }
dialog::backdrop { background: rgba(15,23,42,.94); }
.viewer-toolbar { display: flex; min-height: 4.25rem; padding: .75rem 1rem; align-items: center; justify-content: space-between; gap: 1rem; }
.viewer-toolbar span { color: #cbd5e1; font-size: .75rem; }
.viewer-close { min-height: 44px; padding: .5rem; border: 0; background: transparent; color: var(--white); cursor: pointer; font-weight: 700; }
.viewer-canvas { display: grid; height: calc(100dvh - 5rem); margin: 0 .75rem .75rem; place-items: center; overflow: auto; touch-action: pinch-zoom; }
.viewer-canvas img { max-width: none; min-width: 100%; height: auto; }

.auth-page { display: grid; min-height: 100vh; place-items: center; background: var(--blue-soft); }
.auth-page .app-main { width: min(calc(100% - 2rem), 25rem); min-height: auto; padding: 1.5rem; border-radius: 1rem; box-shadow: 0 12px 28px rgba(15,23,42,.12); }
.auth-panel { width: 100%; }
.product-mark { display: inline-flex; min-height: 44px; margin-bottom: 1.25rem; padding: .55rem .9rem; align-items: center; border-radius: .6rem; background: var(--blue); color: var(--white); font-weight: 800; }

.error-page { max-width: 32rem; padding: 1rem 0; }
.error-page > p:not(.error-code) { color: var(--muted); }
.error-code { margin-bottom: .45rem; color: var(--blue); font-size: .8rem; font-weight: 800; letter-spacing: .12em; }
.request-reference { margin: 1rem 0 1.25rem; padding: .8rem 1rem; border-radius: .75rem; background: var(--surface); }
.request-reference dt { color: var(--muted); font-size: .75rem; }
.request-reference dd { margin: .2rem 0 0; font-family: ui-monospace, Consolas, monospace; font-size: .82rem; overflow-wrap: anywhere; }

.admin-actions, .item-actions { display: flex; gap: .65rem; }
.admin-actions { margin-bottom: 1.1rem; }
.admin-actions > *, .item-actions > *, .item-actions form .button { flex: 1 1 0; width: 100%; }
.admin-list { margin: 0; padding: 0; border-top: 1px solid #e2e8f0; list-style: none; }
.admin-list-item { padding: 1rem 0; border-bottom: 1px solid #e2e8f0; }
.admin-list-item strong, .admin-list-item span { display: block; overflow-wrap: anywhere; }
.admin-list-item span { color: var(--muted); font-size: .85rem; }
.item-actions { margin-top: .8rem; }
.purge-form { display: grid; gap: .5rem; }
.purge-form label { color: var(--muted); font-size: .85rem; }

@media (min-width: 43rem) {
  body { padding: 2rem 0; background: #eef4ff; }
  .app-header { width: min(100%, var(--content-width)); margin: 0 auto; border-radius: 1.5rem 1.5rem 0 0; overflow: visible; }
  .app-main { border-radius: 0 0 1.5rem 1.5rem; box-shadow: 0 14px 30px rgba(15,23,42,.12); }
  .auth-page { padding: 0; }
  .auth-page .app-main { border-radius: 1rem; }
}

@media (max-width: 22rem) {
  .header-inner { padding-inline: .85rem; }
  .app-main { padding-inline: .85rem; }
  .search-controls { flex-direction: column; }
  .form-actions, .detail-actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}