:root {
  color-scheme: dark;
  --bg:#080e18; --panel:#101928; --panel2:#162236;
  --border:#2b3b52; --text:#f3f7ff; --muted:#91a0b5;
  --accent:#35afd1; --danger:#ef6a6a; --success:#51c98b;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:inherit}
button,.button,input,select,textarea{font:inherit}
button,.button{border:0;border-radius:10px;padding:.7rem 1rem;background:var(--accent);color:#fff;font-weight:800;text-decoration:none;cursor:pointer}
.secondary{background:var(--panel2);border:1px solid var(--border)}
.site-header{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.8rem max(1rem,calc((100% - 1400px)/2));border-bottom:1px solid var(--border);background:rgba(8,14,24,.95);backdrop-filter:blur(12px)}
.brand{text-decoration:none;font-weight:950;letter-spacing:.04em}
.site-header nav{display:flex;align-items:center;gap:.8rem}
.site-header nav a{text-decoration:none;color:var(--muted)}
.header-signup{padding:.45rem .7rem;border:1px solid var(--border);border-radius:9px}
.user-label{color:var(--accent);font-weight:800}
.inline-form{display:inline}.link-button{padding:0;background:none;color:var(--muted);font-weight:600}
.page{width:min(1400px,calc(100% - 2rem));margin:1rem auto 4rem}
.hero{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;padding:1rem 0}
.hero h1{margin:.15rem 0;font-size:clamp(1.8rem,4vw,3rem)}
.hero p{margin:.2rem 0;color:var(--muted)}
.eyebrow{color:var(--accent)!important;font-weight:900;letter-spacing:.12em}
.search-panel{display:grid;grid-template-columns:minmax(220px,2fr) minmax(150px,1fr) minmax(300px,1.4fr) auto auto;gap:.55rem;padding:.8rem;border:1px solid var(--border);border-radius:14px;background:var(--panel)}
.search-panel input,.search-panel select,.auth-card input,.request-box input,.request-box textarea{width:100%;border:1px solid var(--border);border-radius:9px;background:#0c1421;color:var(--text);padding:.7rem}
.color-filter{display:flex;align-items:center;gap:.3rem}
.color-filter label input{display:none}
.color-filter span{display:grid;place-items:center;min-width:43px;height:40px;padding:.35rem;border:1px solid var(--border);border-radius:9px;background:var(--panel2);cursor:pointer}
.color-filter input:checked+span{border-color:var(--accent);box-shadow:0 0 0 2px rgba(53,175,209,.18)}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.8rem;margin-top:1rem}
.card{overflow:hidden;border:1px solid var(--border);border-radius:14px;background:var(--panel)}
.card-image{position:relative;background:#060b12}
.card-image img{width:100%;aspect-ratio:5/7;display:block;object-fit:contain}
.owned-badge{position:absolute;right:.45rem;bottom:.45rem;padding:.32rem .55rem;border-radius:999px;background:rgba(6,11,18,.93);font-size:.78rem;font-weight:900}
.card-info{padding:.75rem}
.card-info small,.card-info p{color:var(--muted)}
.card-info h2{margin:.25rem 0;font-size:1rem;min-height:2.7rem}
.request-box{margin-top:.6rem;padding:.55rem;border:1px solid var(--border);border-radius:10px}
.request-box summary{cursor:pointer;font-weight:900;color:var(--accent)}
.request-box form{display:grid;gap:.5rem;margin-top:.6rem}
.request-box label{display:grid;gap:.25rem;font-size:.8rem;color:var(--muted)}
.request-box textarea{min-height:70px;resize:vertical}
.login-to-request{display:block;margin-top:.6rem;color:var(--accent);font-size:.85rem}
.pagination{display:flex;justify-content:center;gap:1rem;align-items:center;margin:1.5rem 0}
.pagination a{padding:.6rem .9rem;border:1px solid var(--border);border-radius:9px;text-decoration:none}
.flash-stack{width:min(900px,calc(100% - 2rem));margin:.8rem auto}
.flash{padding:.7rem 1rem;border:1px solid var(--border);border-radius:10px;background:var(--panel)}
.flash.error{border-color:var(--danger)}.flash.success{border-color:var(--success)}
.auth-page{min-height:70vh;display:grid;place-items:center;padding:1rem}
.auth-card{width:min(440px,100%);display:grid;gap:.8rem;padding:1.2rem;border:1px solid var(--border);border-radius:16px;background:var(--panel)}
.auth-card label{display:grid;gap:.3rem;color:var(--muted)}
.request-list{display:grid;gap:.7rem}
.request-row{display:grid;grid-template-columns:90px 1fr auto;gap:.8rem;align-items:center;padding:.7rem;border:1px solid var(--border);border-radius:13px;background:var(--panel)}
.request-row img{width:90px;aspect-ratio:5/7;object-fit:contain;border-radius:8px;background:#060b12}
.request-row h2{margin:.2rem 0}.request-row p{margin:.2rem 0;color:var(--muted)}
.status{padding:.35rem .55rem;border-radius:999px;border:1px solid var(--border)}
.status.pending{color:#f4cf65}.status.resolved{color:var(--success)}
@media(max-width:800px){
  .site-header{align-items:flex-start;flex-direction:column}.site-header nav{flex-wrap:wrap}
  .search-panel{grid-template-columns:1fr 1fr}.search-panel .color-filter{grid-column:1/-1}
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .request-row{grid-template-columns:65px 1fr}.request-row img{width:65px}.status{grid-column:2}
}


/* ===== Ver.19.3 公開サイト ストレージ同等検索UI ===== */
.public-storage-filter {
  display: grid;
  grid-template-columns: 1fr;
  gap: .65rem;
}

.public-filter-row {
  display: grid;
  gap: .55rem;
  min-width: 0;
}

.public-filter-main {
  grid-template-columns:
    minmax(150px, 1.25fr)
    minmax(170px, 1.45fr)
    minmax(130px, 1fr)
    minmax(130px, 1fr)
    minmax(165px, 1.15fr);
}

.public-filter-options {
  grid-template-columns:
    minmax(315px, 2.2fr)
    minmax(150px, 1fr)
    minmax(150px, 1fr)
    minmax(135px, .85fr)
    minmax(150px, 1fr)
    auto;
  align-items: stretch;
}

.public-filter-main > *,
.public-filter-options > * {
  min-width: 0;
}

.public-filter-main input,
.public-filter-main select,
.public-filter-options > input,
.public-filter-options > select {
  width: 100%;
  height: 48px;
  min-height: 48px;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #0c1421;
  color: var(--text);
  padding: .7rem;
}

.public-civilization-filter {
  min-width: 0;
  min-height: 48px;
  margin: 0;
  padding: .25rem .55rem .45rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #0c1421;
}

.public-civilization-filter legend {
  padding: 0 .3rem;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
}

.public-civilization-filter .color-filter {
  flex-wrap: nowrap;
}

.public-filter-actions {
  display: grid;
  grid-template-columns: 76px 92px;
  gap: .5rem;
}

.public-filter-actions button,
.public-filter-actions .button {
  height: 48px;
  min-height: 48px;
  display: grid;
  place-items: center;
  padding: .55rem .7rem;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .public-filter-main {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .public-filter-options {
    grid-template-columns: minmax(300px, 2fr) repeat(3, minmax(135px, 1fr));
  }

  .public-filter-actions {
    grid-column: span 2;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .public-filter-main,
  .public-filter-options {
    grid-template-columns: 1fr 1fr;
  }

  .public-civilization-filter {
    grid-column: 1 / -1;
  }

  .public-filter-actions {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .public-filter-main,
  .public-filter-options {
    grid-template-columns: 1fr;
  }

  .public-civilization-filter,
  .public-filter-actions {
    grid-column: auto;
  }
}