*{box-sizing:border-box}:root{--bg:#fff8fa;--card:rgba(255,255,255,.94);--text:#2c2528;--muted:#766b70;--line:#f1d7df;--brand:#e77ea0;--brand-dark:#c85f82;--brand-soft:#ffe5ee;--done-bg:#f7f2f4;--danger-bg:#fff0f0;--danger:#c0392b;--shadow:0 12px 30px rgba(91,55,67,.10);--radius:18px}body{margin:0;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic","YuGothic","Noto Sans JP",sans-serif;background:radial-gradient(circle at top left,#ffeaf1 0,transparent 32%),linear-gradient(180deg,#fff8fa 0%,#fff 100%);color:var(--text)}button,input,select,textarea{font:inherit}button{cursor:pointer}.app-shell{width:min(760px,100%);margin:0 auto;padding:max(16px,env(safe-area-inset-top)) 16px calc(88px + env(safe-area-inset-bottom))}.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:14px 0 10px}.eyebrow{margin:0 0 4px;font-size:12px;letter-spacing:.12em;color:var(--brand-dark);font-weight:800;text-transform:uppercase}h1{margin:0;font-size:clamp(30px,8vw,42px);line-height:1.05}h2{margin:0 0 10px}.sync-status{margin:7px 0 0;color:var(--muted);font-size:13px}.top-actions{display:flex;gap:8px}.round-button{width:48px;height:48px;border:0;border-radius:50%;background:var(--brand);color:white;font-size:28px;font-weight:800;display:grid;place-items:center;box-shadow:var(--shadow)}.round-button.ghost{background:var(--brand-soft);color:var(--brand-dark)}.round-button.small{width:36px;height:36px;font-size:24px;box-shadow:none}.card,.month-card,.toolbar,.group,.dialog-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.card,.month-card{padding:14px;margin:12px 0}.setup-card,.auth-card{display:grid;gap:12px}.card p{color:var(--muted);line-height:1.6;margin:0}label{display:grid;gap:7px;color:var(--muted);font-size:13px;font-weight:800}.month-row{display:flex;gap:10px}select,input,textarea{width:100%;border:1px solid var(--line);border-radius:14px;padding:12px;background:white;color:var(--text);outline-color:var(--brand)}.tabs{position:sticky;top:0;z-index:4;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0;padding:6px;border-radius:18px;background:rgba(255,255,255,.88);backdrop-filter:blur(14px);border:1px solid var(--line)}.tab{border:0;border-radius:14px;padding:10px 6px;background:transparent;color:var(--muted);font-size:13px;font-weight:800}.tab.active{background:var(--brand);color:white}.toolbar{padding:10px;display:flex;align-items:center;gap:8px;margin-bottom:16px}.search-wrap{flex:1;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:0 10px}.search-wrap input{border:0;padding-left:0}.text-button{border:0;background:transparent;color:var(--brand-dark);font-size:12px;font-weight:800;white-space:nowrap}.primary-button,.secondary-button,.danger-button{border:0;border-radius:14px;padding:12px 14px;font-weight:800}.primary-button{background:var(--brand);color:white}.secondary-button{background:var(--brand-soft);color:var(--brand-dark)}.danger-button{background:var(--danger-bg);color:var(--danger)}.actions,.auth-actions{display:flex;gap:10px;flex-wrap:wrap}.message{min-height:1.4em;font-size:13px}.list-root{display:grid;gap:14px}.group{overflow:hidden}.group-title{margin:0;padding:14px 16px;font-size:16px;border-bottom:1px solid var(--line);background:linear-gradient(90deg,var(--brand-soft),#fff)}.items{display:grid}.item-card{display:flex;gap:10px;padding:13px 14px;border-bottom:1px solid #f5e5ea;background:white}.item-card:last-child{border-bottom:0}.item-card.done{background:var(--done-bg);opacity:.82}.check-area{width:36px;min-width:36px;border:0;background:transparent;padding:2px 0;display:flex;align-items:flex-start;justify-content:center}.checkbox{width:25px;height:25px;border-radius:9px;border:2px solid var(--brand);background:white;display:inline-grid;place-items:center;margin-top:1px}.item-card.done .checkbox{background:var(--brand)}.item-card.done .checkbox::after{content:"✓";color:#fff;font-weight:900;font-size:16px}.item-main{flex:1;min-width:0}.item-title-row{display:flex;align-items:flex-start;gap:8px}.item-name{flex:1;margin:0;font-size:16px;line-height:1.35;word-break:break-word}.item-card.done .item-name,.item-card.done .item-detail{text-decoration:line-through;color:var(--muted)}.edit-button{border:0;border-radius:999px;padding:5px 9px;background:#f5edf0;color:var(--muted);font-size:12px;font-weight:800}.item-detail,.item-memo{margin:4px 0 0;color:var(--muted);font-size:13px;line-height:1.45}.chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}.chip{display:inline-flex;align-items:center;border-radius:999px;padding:4px 8px;background:#fff2f6;color:var(--brand-dark);font-size:11px;font-weight:800}.chip.secondary{background:#f3f1ff;color:#6a5aad}.chip.priority{background:#fff6d8;color:#8b6b00}.chip.bucket{background:#eaf8ef;color:#2d7a47}dialog{width:min(680px,calc(100% - 28px));border:0;padding:0;background:transparent}dialog::backdrop{background:rgba(55,35,43,.35);backdrop-filter:blur(4px)}.dialog-card{padding:16px;display:grid;gap:12px}.dialog-head,.dialog-actions{display:flex;align-items:center;gap:10px}.dialog-head{justify-content:space-between}.dialog-card label{color:var(--muted);font-size:13px;font-weight:800}.dialog-actions{margin-top:4px}.spacer{flex:1}.hidden{display:none!important}.empty{padding:28px 16px;text-align:center;color:var(--muted)}.small-note{color:var(--muted);font-size:13px;line-height:1.6}@media(max-width:460px){.tabs{gap:5px}.tab{font-size:12px;padding:9px 4px}.toolbar{flex-direction:column;align-items:stretch}.text-button{align-self:flex-end}.month-row{flex-direction:column}.topbar{align-items:center}.round-button{width:44px;height:44px}}


/* v5: drag and drop */
.drag-help {
  margin: -6px 4px 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.drag-handle {
  width: 28px;
  min-width: 28px;
  height: 36px;
  align-self: flex-start;
  border: 0;
  border-radius: 12px;
  background: #fff2f6;
  color: var(--brand-dark);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  touch-action: none;
  user-select: none;
  cursor: grab;
  margin-top: 2px;
  display: grid;
  place-items: center;
}

.drag-handle:active {
  cursor: grabbing;
}

.item-card.is-dragging {
  opacity: 0.35;
}

.drag-ghost {
  position: fixed;
  z-index: 9999;
  width: min(340px, calc(100vw - 32px));
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-1deg);
  box-shadow: 0 18px 45px rgba(91, 55, 67, 0.25);
  border-radius: 18px;
  overflow: hidden;
}

.group.drop-target {
  outline: 3px solid var(--brand);
  outline-offset: 4px;
}

.group.drop-target .group-title {
  background: linear-gradient(90deg, var(--brand), #ffd8e5);
  color: #fff;
}

@media (max-width: 460px) {
  .drag-handle {
    width: 32px;
    min-width: 32px;
  }
}


/* v6: robust touch drag */
body.dragging-active {
  overflow: hidden;
  overscroll-behavior: none;
}

.drag-handle {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
  cursor: grab;
}

.drag-ghost {
  position: fixed !important;
  z-index: 99999 !important;
  pointer-events: none !important;
  width: min(340px, calc(100vw - 32px)) !important;
  transform: translate(-50%, -50%) rotate(-1deg);
  box-shadow: 0 18px 45px rgba(91, 55, 67, 0.28);
  border-radius: 18px;
  overflow: hidden;
  opacity: 0.98;
}

.group.drop-target {
  outline: 3px solid var(--brand) !important;
  outline-offset: 4px;
}

.group.drop-target .group-title {
  background: linear-gradient(90deg, var(--brand), #ffd8e5) !important;
  color: #fff !important;
}


/* v7: working drag and drop */
.drag-help {
  margin: -6px 4px 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.drag-handle {
  width: 32px;
  min-width: 32px;
  height: 38px;
  align-self: flex-start;
  border: 0;
  border-radius: 12px;
  background: #fff2f6;
  color: var(--brand-dark);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  cursor: grab;
  margin-top: 2px;
  display: grid;
  place-items: center;
}

.drag-handle:active {
  cursor: grabbing;
}

body.dragging-active {
  overflow: hidden;
  overscroll-behavior: none;
}

.item-card.is-dragging {
  opacity: 0.35;
}

.drag-ghost {
  position: fixed !important;
  z-index: 99999 !important;
  width: min(340px, calc(100vw - 32px)) !important;
  pointer-events: none !important;
  transform: translate(-50%, -50%) rotate(-1deg);
  box-shadow: 0 18px 45px rgba(91, 55, 67, 0.28);
  border-radius: 18px;
  overflow: hidden;
  opacity: 0.98;
}

.group.drop-target {
  outline: 3px solid var(--brand) !important;
  outline-offset: 4px;
}

.group.drop-target .group-title {
  background: linear-gradient(90deg, var(--brand), #ffd8e5) !important;
  color: #fff !important;
}

/* v8: persistence note */
.sync-status {
  word-break: break-word;
}


/* v9: drag auto-scroll */
body.dragging-active {
  overflow: auto !important;
  overscroll-behavior: contain;
}

.drag-scroll-zone {
  position: fixed;
  left: 0;
  right: 0;
  height: 96px;
  z-index: 99998;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.drag-scroll-zone.top {
  top: 0;
  background: linear-gradient(180deg, rgba(231,126,160,0.20), rgba(231,126,160,0));
}

.drag-scroll-zone.bottom {
  bottom: 0;
  background: linear-gradient(0deg, rgba(231,126,160,0.20), rgba(231,126,160,0));
}

body.dragging-active .drag-scroll-zone.active {
  opacity: 1;
}


/* v10: category/place settings */
.settings-card {
  max-height: min(86vh, 760px);
  overflow: auto;
}

.settings-section {
  border: 1px solid rgba(126, 83, 99, 0.14);
  border-radius: 18px;
  padding: 14px;
  margin: 14px 0;
  background: rgba(255, 250, 252, 0.72);
}

.settings-section h3 {
  margin: 0 0 6px;
  font-size: 16px;
}

.preference-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 12px;
}

.preference-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid rgba(126, 83, 99, 0.13);
  border-radius: 14px;
}

.preference-row span {
  flex: 1;
  font-weight: 700;
  word-break: break-word;
}

.preference-row .mini-danger {
  border: 0;
  border-radius: 999px;
  background: #fff0f3;
  color: #bf3356;
  padding: 6px 10px;
  font-weight: 800;
}

.preference-add-row {
  display: flex;
  gap: 8px;
}

.preference-add-row input {
  flex: 1;
}

.field-helper {
  margin: -6px 0 8px;
  font-size: 12px;
  color: var(--muted);
}

.suggestion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}

.suggestion-chip {
  border: 0;
  border-radius: 999px;
  padding: 7px 10px;
  background: #fff2f6;
  color: var(--brand-dark);
  font-size: 12px;
  font-weight: 800;
}


/* v11: batch edit + price */
.toolbar {
  align-items: center;
}

.mini-select {
  border: 1px solid rgba(126, 83, 99, 0.18);
  border-radius: 999px;
  padding: 9px 12px;
  background: #fff;
  color: var(--text);
  font-weight: 700;
}

.batch-panel {
  margin: 10px 0 14px;
  padding: 12px;
  border: 1px solid rgba(126, 83, 99, 0.16);
  border-radius: 20px;
  background: rgba(255, 250, 252, 0.92);
  box-shadow: 0 10px 26px rgba(91, 55, 67, 0.07);
}

.batch-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.batch-head strong {
  margin-right: auto;
}

.batch-grid {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.batch-grid label {
  margin: 0;
}

.batch-place-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.small-button {
  padding: 9px 12px;
  min-height: 38px;
  white-space: nowrap;
}

.select-check {
  display: none;
  width: 30px;
  min-width: 30px;
  height: 36px;
  align-self: flex-start;
  margin-top: 2px;
  place-items: center;
}

body.selection-mode .select-check {
  display: grid;
}

.select-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.select-check span {
  width: 22px;
  height: 22px;
  border: 2px solid rgba(126, 83, 99, 0.28);
  border-radius: 8px;
  background: #fff;
  display: inline-grid;
  place-items: center;
}

.select-check input:checked + span {
  border-color: var(--brand);
  background: var(--brand);
}

.select-check input:checked + span::after {
  content: "✓";
  color: #fff;
  font-weight: 900;
  font-size: 14px;
}

.item-card.selected {
  outline: 3px solid rgba(231,126,160,0.55);
  outline-offset: 2px;
}

.chip.price {
  background: #fff6df;
  color: #8a5b00;
}

@media (max-width: 620px) {
  .batch-grid {
    grid-template-columns: 1fr;
  }

  .batch-place-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .mini-select {
    width: 100%;
  }
}


/* v13: search bar layout fix */
.toolbar {
  display: grid !important;
  grid-template-columns: minmax(260px, 1fr) auto auto auto;
  gap: 10px;
  align-items: center;
}

.search-wrap {
  width: 100% !important;
  min-width: 260px !important;
  display: flex !important;
  align-items: center;
}

.search-wrap input {
  width: 100% !important;
  min-width: 0 !important;
  display: block !important;
  flex: 1 1 auto !important;
}

.toolbar .mini-select {
  min-width: 170px;
}

@media (max-width: 760px) {
  .toolbar {
    grid-template-columns: 1fr 1fr !important;
  }

  .search-wrap {
    grid-column: 1 / -1;
    min-width: 0 !important;
  }

  .toolbar .mini-select {
    min-width: 0;
    width: 100%;
  }

  #batchModeBtn,
  #seedBtn,
  #signOutBtn {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .toolbar {
    grid-template-columns: 1fr !important;
  }
}


/* v14: remove seed button and tidy toolbar */
.toolbar {
  grid-template-columns: minmax(260px, 1fr) auto auto auto !important;
}

@media (max-width: 760px) {
  .toolbar {
    grid-template-columns: 1fr 1fr !important;
  }

  .search-wrap {
    grid-column: 1 / -1;
  }
}

@media (max-width: 420px) {
  .toolbar {
    grid-template-columns: 1fr !important;
  }
}


/* v15: always selectable */
.toolbar {
  grid-template-columns: minmax(260px, 1fr) auto auto !important;
}

.select-check {
  display: grid !important;
}

body.selection-mode .select-check {
  display: grid !important;
}

.batch-panel.hidden {
  display: none !important;
}

@media (max-width: 760px) {
  .toolbar {
    grid-template-columns: 1fr 1fr !important;
  }

  .search-wrap {
    grid-column: 1 / -1;
  }
}

@media (max-width: 420px) {
  .toolbar {
    grid-template-columns: 1fr !important;
  }
}


/* v16: purchase toggle by item name */
.check-area {
  display: none !important;
}

.item-name {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 10px;
  padding: 2px 4px;
  margin-left: -4px;
}

.item-name::after {
  content: "購入済みにする";
  font-size: 10px;
  font-weight: 800;
  color: var(--brand-dark);
  background: #fff2f6;
  border-radius: 999px;
  padding: 3px 7px;
  opacity: 0;
  transform: translateY(1px);
  transition: opacity 0.12s ease;
}

.item-name:hover::after,
.item-name:focus-visible::after {
  opacity: 1;
}

.item-card.done .item-name::after {
  content: "未購入に戻す";
}

@media (max-width: 640px) {
  .item-name::after {
    display: none;
  }
}


/* v17: bulk place select */
.batch-grid select,
.batch-grid input {
  width: 100%;
}

.batch-place-actions {
  grid-column: span 2;
}

@media (max-width: 620px) {
  .batch-place-actions {
    grid-column: auto;
  }
}


/* v18: bulk remove place */
.danger-light {
  background: #fff0f3 !important;
  color: #bf3356 !important;
}

@media (max-width: 620px) {
  .batch-place-actions {
    grid-template-columns: 1fr;
  }
}


/* v20: only place/category tabs */
.tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}


/* v21: move logout to settings bottom */
.toolbar {
  grid-template-columns: minmax(260px, 1fr) auto !important;
}

.settings-bottom-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed rgba(126, 83, 99, 0.18);
}

.logout-button {
  border: 0;
  background: transparent;
  color: #9c6678;
  font-weight: 800;
  padding: 8px 4px;
  font-size: 13px;
}

.logout-button:hover {
  color: #bf3356;
  text-decoration: underline;
}

@media (max-width: 760px) {
  .toolbar {
    grid-template-columns: 1fr !important;
  }

  .search-wrap {
    grid-column: auto;
  }

  .toolbar .mini-select {
    width: 100%;
  }

  .settings-bottom-actions {
    justify-content: flex-end;
  }
}


/* v22: hide status/bucket UI */
.chip.bucket {
  display: none !important;
}


/* v23: ChatGPT import */
.import-card {
  max-height: min(86vh, 760px);
  overflow: auto;
}

.import-target-month {
  margin: 8px 0 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #fff8fb;
  color: var(--brand-dark);
  font-size: 13px;
}

#importTextInput {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  line-height: 1.45;
}

.inline-check {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  font-size: 13px;
  color: var(--text);
}

.inline-check input {
  width: auto;
}

.import-format-help {
  margin: 10px 0;
  border: 1px solid rgba(126, 83, 99, 0.14);
  border-radius: 14px;
  padding: 10px 12px;
  background: #fff;
}

.import-format-help summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--brand-dark);
}

.import-format-help pre {
  overflow: auto;
  padding: 10px;
  border-radius: 12px;
  background: #2d2430;
  color: #fff;
  font-size: 12px;
}

.import-preview {
  margin: 10px 0;
  border: 1px solid rgba(126, 83, 99, 0.14);
  border-radius: 16px;
  padding: 10px;
  background: #fff;
  font-size: 13px;
}

.import-preview ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.import-preview li {
  margin: 4px 0;
}


/* v24: import action preview */
.import-preview .import-action-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0;
}

.import-preview .summary-pill {
  border-radius: 999px;
  padding: 7px 9px;
  background: #fff2f6;
  color: var(--brand-dark);
  font-weight: 800;
  text-align: center;
  font-size: 12px;
}

.import-preview .warning-list {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: #fff7e6;
  color: #7a5200;
}


/* v25: force visible import button */
.top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

#importDialog.import-dialog,
.import-card {
  max-height: min(86vh, 760px);
  overflow: auto;
}

.import-button {
  display: inline-grid !important;
  place-items: center;
  visibility: visible !important;
  opacity: 1 !important;
}

.import-target-month {
  margin: 8px 0 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #fff8fb;
  color: var(--brand-dark);
  font-size: 13px;
}

#importTextInput {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  line-height: 1.45;
}

.inline-check {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  font-size: 13px;
  color: var(--text);
}

.inline-check input {
  width: auto;
}

.import-format-help {
  margin: 10px 0;
  border: 1px solid rgba(126, 83, 99, 0.14);
  border-radius: 14px;
  padding: 10px 12px;
  background: #fff;
}

.import-format-help summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--brand-dark);
}

.import-format-help pre {
  overflow: auto;
  padding: 10px;
  border-radius: 12px;
  background: #2d2430;
  color: #fff;
  font-size: 12px;
}

.import-preview {
  margin: 10px 0;
  border: 1px solid rgba(126, 83, 99, 0.14);
  border-radius: 16px;
  padding: 10px;
  background: #fff;
  font-size: 13px;
}

.import-preview ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.import-preview li {
  margin: 4px 0;
}

.import-preview .import-action-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0;
}

.import-preview .summary-pill {
  border-radius: 999px;
  padding: 7px 9px;
  background: #fff2f6;
  color: var(--brand-dark);
  font-weight: 800;
  text-align: center;
  font-size: 12px;
}

.import-preview .warning-list {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: #fff7e6;
  color: #7a5200;
}


/* v26: import textarea fix */
#importTextInput {
  min-height: 240px;
  background: #fff !important;
  color: var(--text) !important;
  pointer-events: auto !important;
  user-select: text !important;
  -webkit-user-select: text !important;
  cursor: text !important;
  position: relative;
  z-index: 2;
}

#importTextInput::placeholder {
  color: rgba(126, 83, 99, 0.48);
}

.import-card label {
  pointer-events: auto !important;
}


/* v27: previous-month carry-over */
.month-help-note {
  margin: 8px 0 0;
}
.month-row .secondary-button {
  white-space: nowrap;
}
@media (max-width: 520px) {
  .month-row {
    flex-direction: column;
  }
  .month-row .secondary-button {
    width: 100%;
  }
}


/* v28: prevent opening add dialog before remote preferences are loaded */
body.preferences-loading #openAddBtn,
body.preferences-loading #openImportBtn,
body.preferences-loading #addMonthBtn,
body.preferences-loading #carryOverBtn {
  opacity: 0.55;
  pointer-events: none;
}