* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: "Segoe UI", "Hiragino Sans", Meiryo, sans-serif;
    background: #f5f6f8;
    color: #222;
}
main { max-width: 1080px; margin: 0 auto; padding: 16px; }
a { color: #2563eb; }

.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1e293b;
    color: #fff;
    padding: 10px 16px;
}
.site-title a { color: #fff; text-decoration: none; font-weight: bold; }
.site-header nav a { color: #cbd5e1; margin-left: 12px; text-decoration: none; }
.site-header nav a:hover { color: #fff; }
.nav-user { color: #fbbf24; margin-left: 12px; }

h1 { font-size: 1.4em; }
.flash { background: #dcfce7; border: 1px solid #86efac; padding: 8px 12px; margin: 8px 0; border-radius: 4px; }
.error { background: #fee2e2; border: 1px solid #fca5a5; padding: 8px 12px; margin: 8px 0; border-radius: 4px; }
.ok { background: #dcfce7; border: 1px solid #86efac; padding: 4px 12px; margin: 4px 0; border-radius: 4px; }

.auth-form { max-width: 420px; display: flex; flex-direction: column; gap: 12px; }
.auth-form label { display: flex; flex-direction: column; gap: 4px; }
.auth-form label.checkbox { flex-direction: row; align-items: center; gap: 8px; }
.auth-form input[type=text], .auth-form input[type=password], .auth-form input[type=email] {
    padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px;
}
button {
    padding: 8px 16px; background: #2563eb; color: #fff;
    border: none; border-radius: 4px; cursor: pointer;
}
button:hover { background: #1d4ed8; }
button:disabled { background: #94a3b8; cursor: default; }

.toolbar {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    margin-bottom: 12px;
}
.toolbar select { padding: 6px; }
.usage { color: #475569; }

#dropzone {
    border: 2px dashed #94a3b8; border-radius: 8px;
    padding: 32px; text-align: center; color: #475569;
    background: #fff; margin-bottom: 8px;
}
#dropzone.dragover { border-color: #2563eb; background: #eff6ff; }
#dropzone button { margin-left: 12px; }

.mode-bar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-top: 12px;
}
.mode-label { color: #475569; }
.mode-btn {
    background: #fff; color: #475569;
    border: 1px solid #cbd5e1; border-radius: 4px; padding: 6px 14px;
}
.mode-btn:hover { background: #f1f5f9; }
.mode-btn.active { background: #2563eb; color: #fff; border-color: #2563eb; }
.mode-btn.active:hover { background: #1d4ed8; }
#action-status { color: #475569; margin-left: 8px; }
#action-status.is-error { color: #b91c1c; }

/* display 指定を持つ要素にも hidden 属性を効かせる */
[hidden] { display: none !important; }

.stack-bar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
    padding: 8px 12px; margin: 12px 0;
}
.stack-bar input { padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 4px; min-width: 220px; }
#stack-info { color: #475569; min-width: 90px; }
#delete-btn { background: #dc2626; }
#delete-btn:hover:not(:disabled) { background: #b91c1c; }
#delete-btn:disabled { background: #94a3b8; }

#grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    padding: 8px;
    border: 2px solid transparent; border-radius: 8px;
    margin-top: 12px;
}
/* 選択モードでは一覧エリア自体の見た目を変え、どちらのモードか一目で分かるようにする */
body.mode-select #grid { border-color: #2563eb; background: #eff6ff; }
body.mode-copy .card { cursor: copy; }
body.mode-select .card { cursor: pointer; }

/* コピー直後に対象カードを一瞬光らせ、どれをコピーしたかを示す */
@keyframes card-copied {
    0%   { border-color: #16a34a; background: #dcfce7; }
    100% { border-color: #e2e8f0; background: #fff; }
}
.card.copied { animation: card-copied 0.8s ease-out; }

.card {
    position: relative;
    background: #fff; border: 2px solid #e2e8f0; border-radius: 8px;
    padding: 8px; user-select: none;
}
.card:hover { border-color: #93c5fd; }
.card.selected { border-color: #2563eb; background: #eff6ff; }
.card img {
    width: 100%; height: 140px; object-fit: contain; background: #f8fafc;
    display: block; pointer-events: none;
}
.card-name {
    font-size: 0.85em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-top: 6px;
}
.card-meta { font-size: 0.75em; color: #64748b; }
.badge {
    position: absolute; top: -8px; left: -8px;
    background: #2563eb; color: #fff; border-radius: 50%;
    width: 26px; height: 26px; line-height: 26px; text-align: center;
    font-size: 0.85em; font-weight: bold; z-index: 1;
}
.empty { color: #64748b; }

table.admin { width: 100%; border-collapse: collapse; background: #fff; }
table.admin th, table.admin td { border: 1px solid #e2e8f0; padding: 6px 10px; text-align: left; }
table.admin th { background: #f1f5f9; }
table.admin td form { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
table.admin input[type=number] { width: 90px; padding: 4px; }
.admin-nav { margin-bottom: 12px; }
.admin-nav a { margin-right: 12px; }
.search-form { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.search-form input { padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 4px; }
.pager { margin: 12px 0; }
.pager a, .pager span { margin-right: 8px; }

.settings-section {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
    padding: 16px; margin-bottom: 16px;
}
.settings-section h2 { margin-top: 0; font-size: 1.1em; }
.settings-section form { display: flex; flex-direction: column; gap: 10px; max-width: 420px; }
.settings-section form.inline { flex-direction: row; align-items: center; }
.settings-section input[type=text], .settings-section input[type=password], .settings-section input[type=email] {
    padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px;
}
.note { color: #64748b; font-size: 0.9em; }