html, body, #root { height: 100%; }
body { overflow: hidden; }

#root {
  display: flex;
  justify-content: center;
  background: var(--color-neutral-200);
}
[data-theme="dark"] ~ #root,
#root:has(.app[data-theme="dark"]) { background: #0e0f11; }

.app {
  position: relative;
  width: 100%;
  max-width: 460px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

@media (min-width: 461px) {
  .app { margin: 0 auto; }
}

.app *::-webkit-scrollbar { display: none; }
.app * { scrollbar-width: none; }

.app textarea:focus, .app input:focus { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.scroll-y {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.safe-top { padding-top: max(14px, env(safe-area-inset-top)); }
.safe-bottom { padding-bottom: max(10px, env(safe-area-inset-bottom)); }

.row-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 56px; padding: 10px 14px;
  border: 0; border-bottom: 1px solid var(--color-divider);
  background: transparent; color: var(--color-text);
  font-family: var(--font-body); font-size: 15px; text-align: left; cursor: pointer;
}
.row-btn:last-child { border-bottom: 0; }
.row-btn:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.row-btn:active { background: color-mix(in srgb, var(--color-text) 8%, transparent); }

.tab-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; height: 62px; border: 0; border-top: 2px solid transparent;
  background: transparent; color: var(--color-neutral-600);
  font-family: var(--font-heading); font-size: 10px; letter-spacing: 0.12em; cursor: pointer;
}
.tab-btn.active { border-top-color: var(--color-accent); color: var(--color-accent-700); }
.tab-btn:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

.seg-btn {
  height: 40px; padding: 0 14px; border: 0; background: transparent;
  color: var(--color-text); font-family: var(--font-heading); font-size: 12px;
  letter-spacing: 0.1em; cursor: pointer;
}
.seg-btn.active { background: var(--color-accent); color: var(--color-bg); }

.chip-btn {
  height: 48px; border: 0; border-right: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider); background: transparent;
  color: var(--color-text); font-family: var(--font-heading); font-size: 16px;
  letter-spacing: 0.06em; cursor: pointer;
}
.chip-btn.active { background: var(--color-accent); color: var(--color-bg); }

.section-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; min-height: 52px; padding: 8px 14px; border: 0;
  background: transparent; color: var(--color-text); cursor: pointer;
}
.section-head:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

.chev { color: var(--color-neutral-500); transition: transform .15s; flex: none; }
.chev.open { transform: rotate(180deg); }

.flag-btn {
  display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px;
  border: 1px solid var(--color-divider); background: transparent;
  color: var(--color-neutral-600); font-family: var(--font-heading); font-size: 10px;
  letter-spacing: 0.1em; cursor: pointer;
}
.flag-btn.flagged { color: var(--color-accent-700); border-color: var(--color-accent-700); }

.photo-chip {
  flex: none; width: 118px; height: 96px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--color-divider);
  background: repeating-linear-gradient(45deg, transparent, transparent 8px, var(--color-accent-100) 8px, var(--color-accent-100) 9px);
  color: var(--color-accent-700); cursor: pointer; padding: 6px;
}
.photo-chip:hover { background-color: color-mix(in srgb, var(--color-accent-100) 60%, transparent); }

.attachment-chip {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--color-divider);
  padding: 8px 10px; font-size: 12px;
}
.attachment-chip button { border: 0; background: none; cursor: pointer; color: var(--color-neutral-600); padding: 2px; font-size: 12px; }

.spec-grid {
  display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--color-divider);
}
.spec-cell { padding: 10px 12px; border-right: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); }
.spec-cell:nth-child(2n) { border-right: 0; }
.spec-cell:nth-last-child(-n+2) { border-bottom: 0; }
.spec-label { font-size: 10px; letter-spacing: 0.12em; color: var(--color-neutral-600); }
.spec-value { font-family: var(--font-heading); font-size: 18px; }

.stat-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; border: 1px solid var(--color-divider);
}
.stat-cell { padding: 10px 12px; border-right: 1px solid var(--color-divider); }
.stat-cell:last-child { border-right: 0; }
.stat-value { font-family: var(--font-heading); font-size: 20px; }
.stat-label { font-size: 10px; letter-spacing: 0.1em; color: var(--color-neutral-600); }

.overlay {
  position: absolute; inset: 0; z-index: 50; display: flex; flex-direction: column;
  background: var(--color-bg);
}

.photo-overlay {
  position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; padding: 22px;
  background: color-mix(in srgb, #101214 88%, transparent); color: #e8eaec;
}

.field-label {
  font-size: 11px; letter-spacing: 0.12em; font-family: var(--font-heading); color: var(--color-neutral-600);
}

.notice-box {
  border: 1px solid var(--color-divider); background: var(--color-neutral-100);
  padding: 10px 12px; font-size: 12px; line-height: 1.5; color: var(--color-neutral-700);
}

.empty-badge {
  border: 1px solid var(--color-divider); width: 76px; height: 76px; display: flex;
  align-items: center; justify-content: center; color: var(--color-neutral-500);
}
.empty-badge.accent { border-color: var(--color-accent); color: var(--color-accent-700); }