/* iRO Sprint 1 v1.1.8 — listing form visual contrast */
:root{
  --iro-blue:#102f5a;
  --iro-blue-2:#1a4778;
  --iro-teal:#0a9d90;
  --iro-teal-dark:#08776f;
  --iro-red:#f34b37;
  --iro-gold:#b7772d;
  --iro-cream:#fff9ee;
  --iro-paper:#fffdf9;
  --iro-muted:#687284;
  --iro-border:#ead8bd;
  --iro-shadow:0 14px 34px rgba(46,70,87,.14);
}

html{background:#fbf6ed}
body{
  min-height:100vh;
  color:var(--iro-blue)!important;
  background:
    radial-gradient(circle at 50% 0,#fff 0,rgba(255,255,255,0) 38rem),
    linear-gradient(180deg,#f9f4ea,#fffaf3)!important;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC",sans-serif;
}

/* Shared desktop header */
.announcement{background:linear-gradient(90deg,#c8edff,#ebf9ff,#c9efff)!important}
.topbar{min-height:94px!important}
.header-shell{min-height:94px}
.header-logo{
  width:350px!important;
  height:auto!important;
  max-height:94px;
  object-fit:contain!important;
  object-position:left center;
}
.desktop-nav{height:94px}
.desktop-nav button{
  min-width:126px;
  padding:0 16px;
  font-size:17px;
}
#loginBtn.line-login-card{background:linear-gradient(180deg,#19bca8,#07998c)!important}

@media(min-width:1281px){
  .header-shell{
    position:relative;
    width:min(1420px,100%);
  }
  .desktop-nav{
    position:absolute;
    left:50%;
    top:0;
    transform:translateX(-50%);
  }
  #loginBtn.line-login-card{
    position:absolute;
    left:calc(50% + 320px);
    top:50%;
    transform:translateY(-50%);
  }
  #loginBtn.line-login-card:hover{
    transform:translateY(calc(-50% - 1px));
  }
}

@media(max-width:1280px) and (min-width:1101px){
  .header-logo{width:235px!important}
  .desktop-nav button{
    min-width:94px;
    padding:0 8px;
    font-size:15px;
  }
}

/* Homepage composition */
#homeView{
  position:relative;
  width:100%;
  isolation:isolate;
  background:
    linear-gradient(
      180deg,
      rgba(235,249,255,.03) 0%,
      rgba(255,255,255,.04) 42%,
      rgba(255,250,241,.30) 68%,
      rgba(255,250,241,.86) 92%,
      #fffaf1 100%
    ),
    url("/assets/iro-market-world-v1.1.0.png") center top/100% auto no-repeat;
}
.marketplace-hero{
  min-height:570px;
  padding-top:24px!important;
  padding-bottom:18px!important;
  gap:12px!important;
  background:transparent!important;
}
.marketplace-hero:before{
  background:
    radial-gradient(
      ellipse at 50% 22%,
      rgba(255,255,255,.68) 0%,
      rgba(255,255,255,.22) 29%,
      transparent 55%
    )!important;
}
.marketplace-hero .hero-copy h2{
  font-size:clamp(44px,4vw,62px)!important;
  color:#086c63!important;
}
.market-search{
  width:min(910px,calc(100% - 14px));
  min-height:72px;
  padding:7px;
  overflow:hidden;
  background:rgba(255,253,249,.96);
  border:1px solid rgba(198,148,86,.68);
  border-radius:20px;
  box-shadow:
    0 0 0 6px rgba(250,249,241,.84),
    0 0 0 7px rgba(147,194,208,.34),
    0 16px 34px rgba(52,84,102,.2);
}
.market-keyword{
  min-width:0;
  background:rgba(255,255,255,.34);
}
.search-leading-icon{
  width:30px;
  height:30px;
  flex:0 0 30px;
  fill:none;
  stroke:#5d6167;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.market-keyword input,.market-search select{
  height:56px!important;
}
.market-search select{
  border-left:1px solid #eadbc6!important;
}
.market-search button{
  min-height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:0 20px!important;
  border:1px solid #df3526!important;
  border-radius:12px!important;
  color:#fff!important;
  background:linear-gradient(180deg,#ff6752,#f04431)!important;
  box-shadow:0 5px 10px rgba(232,63,42,.25)!important;
  font-size:16px;
  font-weight:950;
}
.market-search button:hover,
.market-search button:focus-visible{
  background:linear-gradient(180deg,#ff725e,#e93d2b)!important;
  box-shadow:0 7px 14px rgba(232,63,42,.3)!important;
}
.search-button-icon{
  width:28px;
  height:28px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .16s ease,opacity .16s ease;
}
.market-search button:hover .search-button-icon{transform:scale(1.06)}
.market-search button:active .search-button-icon{transform:scale(.96)}
.market-search button:focus-visible{
  outline:3px solid rgba(255,79,56,.28)!important;
  outline-offset:3px;
}
.adventure-actions{
  width:min(910px,calc(100% - 14px));
  grid-template-columns:repeat(3,1fr);
  min-height:86px;
  padding:8px 20px;
  overflow:hidden;
  background:rgba(255,253,249,.96);
  border:1px solid rgba(198,148,86,.72);
  border-radius:44px;
  box-shadow:
    0 0 0 6px rgba(250,249,241,.84),
    0 0 0 7px rgba(147,194,208,.34),
    0 13px 30px rgba(52,84,102,.17);
}
.adventure-actions button{
  min-height:68px;
  gap:16px;
  padding:7px 24px;
  border-right:1px solid #e7d3b6;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.adventure-actions button>span,
.adventure-actions button>span>b,
.adventure-actions button>span>small{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.adventure-actions .action-icon{
  width:52px;
  height:50px;
  min-width:52px;
  display:block;
  object-fit:contain;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}
.adventure-actions button:nth-child(2) .action-icon{
  width:46px;
  height:45px;
  min-width:46px;
}
.adventure-actions button:nth-child(3) .action-icon{
  width:50px;
  height:47px;
  min-width:50px;
}
.adventure-actions b{
  color:#102f5a;
  font-size:16px;
  letter-spacing:.03em;
}
.adventure-actions small{
  margin-top:3px;
  color:#747b84;
  font-size:12px;
}
.adventure-actions button:nth-child(3){border-right:0}
.category-grid{
  width:min(1260px,100%);
  gap:0;
  margin-top:4px!important;
  padding:8px 10px;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(255,253,246,.98),rgba(250,245,232,.96));
  border:1px solid #c99856;
  border-radius:24px;
  box-shadow:
    0 0 0 4px rgba(250,249,241,.84),
    0 0 0 5px rgba(147,194,208,.3),
    0 12px 25px rgba(52,84,102,.15);
}
.category-grid button{
  min-height:116px;
  grid-template-columns:88px minmax(0,1fr);
  padding:8px 12px 8px 5px;
  overflow:hidden;
  text-align:left;
  background:transparent!important;
  border:0!important;
  border-right:1px solid #eadcc7!important;
  border-radius:0!important;
  box-shadow:none!important;
  backdrop-filter:none;
}
.category-grid button:last-child{border-right:0!important}
.category-grid button:hover{
  background:rgba(255,255,255,.42)!important;
  border-color:#eadcc7!important;
  box-shadow:none!important;
}
.category-grid button>img{
  width:88px;
  height:98px;
  object-fit:contain;
  object-position:center;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  mix-blend-mode:normal;
}
.category-grid button>span{
  grid-row:1/3;
  width:auto;
  height:auto;
  display:block!important;
  padding:0!important;
  color:var(--iro-blue);
  background:transparent!important;
  border:0;
  border-radius:0;
  font:inherit;
}
.category-grid button b{font-size:18px}
.category-grid button small{font-size:12px;line-height:1.55}

.home-operations{
  width:min(1320px,calc(100% - 32px));
  margin:-4px auto 0!important;
  padding:12px 0 18px!important;
}
.market-heading{padding:0 8px}
.home-product-row{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.home-mini-card{
  grid-template-columns:126px minmax(0,1fr)!important;
  min-height:166px;
  padding:12px!important;
  background:rgba(255,255,255,.96)!important;
  border:1px solid var(--iro-border)!important;
  color:var(--iro-blue)!important;
  box-shadow:0 9px 24px rgba(40,70,91,.08);
}
.home-mini-card img,.home-mini-card .home-mini-placeholder{
  width:126px!important;
  height:140px!important;
  background:#f5f0e8!important;
}
.home-mini-card h4{color:var(--iro-blue)!important;font-size:17px}
.home-mini-card p{color:var(--iro-muted)!important}
.home-mini-card b{color:var(--iro-red)!important;font-size:20px}
.home-loading,.home-empty{background:rgba(255,255,255,.92)!important;border-color:var(--iro-border)!important;color:var(--iro-muted)!important}
.trust-strip{
  width:min(1320px,calc(100% - 32px));
  margin:0 auto 8px;
  border-color:var(--iro-border)!important;
  box-shadow:0 8px 22px rgba(40,70,91,.07);
}

/* Unified inner-page shell */
.view.active:not(#homeView){
  position:relative;
  width:min(1240px,calc(100% - 36px))!important;
  margin:34px auto 48px!important;
}
.view.active:not(#homeView):before{
  content:"";
  position:fixed;
  z-index:-2;
  inset:128px 0 0;
  background:
    linear-gradient(180deg,rgba(238,249,253,.85),rgba(255,249,238,.96)),
    url("/assets/iro-market-world-v1.1.0.png") center top/cover no-repeat;
  opacity:.7;
}
.panel,.diag-card,.member-box,.member-stat,.display-name-card,.line-friend-card,.upload-box{
  color:var(--iro-blue)!important;
  background:rgba(255,253,249,.96)!important;
  border:1px solid var(--iro-border)!important;
  box-shadow:var(--iro-shadow)!important;
}
.panel{
  border-radius:26px!important;
  padding:28px!important;
}
.panel>h2,.section-head h2,.section-head h3{
  color:var(--iro-blue)!important;
  font-family:Georgia,"Noto Serif TC",serif;
}
.panel>h2{margin:0 0 8px;font-size:31px}
.muted,.panel p,.member-stat small,.member-stat span{color:var(--iro-muted)!important}

/* Search and marketplace cards */
#searchView .search-hero{padding-bottom:22px!important}
.listing-tabs button{
  border-color:#bfcbd3!important;
  background:#fff!important;
  color:var(--iro-blue)!important;
}
.listing-tabs button.active{
  border-color:var(--iro-teal)!important;
  background:var(--iro-teal)!important;
  color:#fff!important;
}
.filters{
  grid-template-columns:minmax(220px,1.5fr) repeat(4,minmax(130px,1fr)) 110px!important;
}
.filters input,.filters select,.form input,.form select,.form textarea,.copy-row input{
  min-height:50px!important;
  color:#24354a!important;
  background:#fff!important;
  border:1px solid #d9dfe3!important;
  border-radius:13px!important;
}
.filters button,.primary{
  min-height:50px;
  color:#fff!important;
  background:linear-gradient(180deg,#17aa9c,#07877d)!important;
  border:0!important;
  box-shadow:0 7px 14px rgba(8,135,125,.2);
}
.grid{gap:16px}
.product-card{
  color:var(--iro-blue)!important;
  background:rgba(255,255,255,.97)!important;
  border:1px solid var(--iro-border)!important;
  border-radius:20px!important;
  box-shadow:0 10px 26px rgba(40,70,91,.1)!important;
}
.product-card:hover{border-color:#d4ad70!important;box-shadow:0 16px 34px rgba(40,70,91,.16)!important}
.product-card h4{color:var(--iro-blue)!important}
.product-card p{color:var(--iro-muted)!important}
.product-card .price{color:var(--iro-red)!important}
.product-card>img{background:#f5f0e8!important}
.badge{border-color:#d9dfe3!important;color:#617086!important;background:#f8fafc}
.card-actions button,.pill,.share-box button{
  color:var(--iro-blue)!important;
  background:#fff!important;
  border:1px solid #cfd8df!important;
}

/* Listing form */
#sellView .panel{max-width:940px;margin:0 auto}
.form{max-width:820px!important;margin:20px auto 0;gap:18px!important}
#sellView .form>label,
#sellView .form .two>label{
  color:#12365f!important;
  font-size:15px;
  font-weight:900!important;
  line-height:1.45;
  letter-spacing:.02em;
}
#sellView .form>label input,
#sellView .form>label textarea,
#sellView .form .two>label input,
#sellView .form .two>label select{
  margin-top:8px;
}
.listing-type-field{
  color:var(--iro-blue)!important;
  background:#fffaf2!important;
  border:1px solid #dfc49d!important;
  border-radius:18px!important;
}
#sellView .listing-type-field legend{
  color:#12365f!important;
  background:#fffdf9!important;
  font-weight:900!important;
}
#sellView .listing-type-field .listing-choice{
  color:#12365f!important;
  background:#fffdf9!important;
  border:1px solid #d9c4a5!important;
  box-shadow:0 5px 14px rgba(52,84,102,.06)!important;
}
#sellView .listing-choice:hover{
  border-color:#77bdb5!important;
  background:#f7fcfa!important;
}
#sellView .listing-choice:has(input:checked){
  border-color:var(--iro-teal)!important;
  background:#eaf8f5!important;
  box-shadow:0 0 0 2px rgba(10,157,144,.13)!important;
}
#sellView .listing-choice:has(input:checked) .choice-text b{color:var(--iro-teal-dark)!important}
#sellView .choice-text b{color:#12365f!important}
#sellView .choice-text em,
#sellView .listing-type-field small{color:#59697d!important}
#sellView .choice-dot{
  border-color:#8090a2!important;
  background:#fff!important;
  box-shadow:inset 0 0 0 5px #fff!important;
}
#sellView .listing-choice:has(input:checked) .choice-dot{
  border-color:var(--iro-teal)!important;
  background:var(--iro-teal)!important;
  box-shadow:inset 0 0 0 5px #fff!important;
}
.upload-box{
  border:2px dashed #cbb28e!important;
  border-radius:18px!important;
  text-align:center;
}
.upload-box.drag{border-color:var(--iro-teal)!important;background:#eefaf8!important}
.image-preview .preview-item{background:#fff!important;border-color:var(--iro-border)!important}

/* Member center */
#memberView .panel{max-width:1060px;margin:0 auto}
#memberView .member-box,
#memberView .display-name-card,
#memberView .line-friend-card,
#memberView .member-stat{
  color:var(--iro-blue)!important;
  background:rgba(255,255,255,.96)!important;
  border:1px solid var(--iro-border)!important;
  box-shadow:0 9px 24px rgba(40,70,91,.08)!important;
}
#memberView .display-name-card span,
#memberView .line-friend-card span,
#memberView .member-stat span{color:var(--iro-blue)!important}
#memberView .display-name-card small,
#memberView .line-friend-card small,
#memberView .member-stat small{color:var(--iro-muted)!important}
#memberView .member-stat b{color:var(--iro-teal-dark)!important}
#memberView .copy-row input{background:#fff!important;color:#26374a!important;border-color:#d8dfe4!important}
#memberView .copy-row button,#memberView .section-head button{
  color:#fff!important;
  background:var(--iro-teal)!important;
  border:0!important;
}

/* Detail dialog */
.modal-backdrop{background:rgba(10,31,54,.68)!important}
.detail-card{
  color:var(--iro-blue)!important;
  background:var(--iro-paper)!important;
  border:1px solid var(--iro-border)!important;
}
.detail-desc,.detail-meta div{
  color:#33465b!important;
  background:#fff!important;
  border-color:var(--iro-border)!important;
}
.detail-meta span{color:var(--iro-muted)!important}
.modal-close{color:#fff!important;background:var(--iro-blue)!important}

/* Footer and legal pages */
.legal-footer{
  width:min(1320px,calc(100% - 32px));
  margin:0 auto;
  padding:0 12px 34px!important;
  color:#657185!important;
}
.platform-statement{
  flex-basis:100%;
  display:grid;
  grid-template-columns:140px 1fr;
  align-items:center;
  gap:18px;
  width:100%;
  margin-bottom:10px;
  padding:13px 22px;
  text-align:left;
  background:rgba(255,253,249,.96);
  border:1px solid var(--iro-border);
  border-radius:18px;
  box-shadow:0 8px 22px rgba(40,70,91,.07);
}
.platform-statement img{width:130px;height:48px;object-fit:contain}
.legal-footer a{color:var(--iro-blue)!important}
.legal-footer small{color:#7c8796}

.nav{
  position:sticky;
  top:0;
  z-index:5;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid #e7e2da;
  box-shadow:0 6px 18px rgba(45,76,105,.08);
}
.wrap{width:min(1120px,calc(100% - 32px));margin:0 auto}
.navin{min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav .brand{display:flex;align-items:center;gap:12px;color:var(--iro-blue);text-decoration:none;font-weight:900}
.nav .brand img{width:74px;height:58px;object-fit:contain}
.page{
  min-height:calc(100vh - 88px);
  padding:42px 0 70px;
  background:
    linear-gradient(180deg,rgba(238,249,253,.9),rgba(255,249,238,.97)),
    url("/assets/iro-market-world-v1.1.0.png") center top/cover fixed no-repeat;
}
.doc,.state-card,.profile-panel,.profile-edit-card,.menu-card,.debug-card,.stat-card{
  color:var(--iro-blue)!important;
  background:rgba(255,253,249,.97)!important;
  border:1px solid var(--iro-border)!important;
  border-radius:24px!important;
  box-shadow:var(--iro-shadow)!important;
}
.doc{max-width:900px;padding:34px 38px;line-height:1.85}
.doc h1,.doc h2{color:var(--iro-blue)}
.doc h1{font-family:Georgia,"Noto Serif TC",serif}
.btn,.ghost-btn,.back-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 18px;
  color:#fff!important;
  background:var(--iro-teal)!important;
  border:0!important;
  border-radius:12px;
  text-decoration:none;
  font-weight:900;
}
.center-page{display:grid;place-items:center;padding:24px}
.state-card{width:min(520px,100%);padding:34px;text-align:center}
.state-card .wide{width:100%;margin:16px 0}

/* Responsive rules */
.bottom-nav{display:none!important}
@media(max-width:1100px){
  .header-shell{gap:14px}
  .header-logo{width:205px!important}
  .desktop-nav button{min-width:96px}
  .category-grid{grid-template-columns:repeat(3,1fr)}
  .category-grid button{border-bottom:1px solid #eadcc7!important}
  .category-grid button:nth-child(3n){border-right:0!important}
  .category-grid button:nth-child(n+4){border-bottom:0!important}
  .marketplace-hero{min-height:690px}
  .home-product-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .filters{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:760px){
  body{padding-bottom:76px!important}
  .announcement{font-size:12px}
  .topbar{min-height:66px!important;padding:0 10px!important}
  .header-shell{min-height:66px;grid-template-columns:1fr auto}
  .header-logo{width:148px!important;height:46px!important}
  .desktop-nav{display:none}
  #loginBtn.line-login-card{height:42px!important;min-height:42px!important;padding:0 12px!important}
  #loginBtn .line-mark{width:24px;height:24px}
  .marketplace-hero{
    min-height:auto;
    padding:28px 12px 26px!important;
    gap:15px!important;
    background-position:center top!important;
  }
  #homeView{
    background:
      linear-gradient(
        180deg,
        rgba(235,249,255,.10) 0%,
        rgba(255,255,255,.12) 38%,
        rgba(255,250,241,.72) 70%,
        #fffaf1 100%
      ),
      url("/assets/iro-market-world-v1.1.0.png") center top/auto 760px no-repeat;
  }
  .marketplace-hero .hero-copy h2{font-size:34px!important;white-space:normal!important}
  .marketplace-hero .hero-copy p{font-size:14px!important;letter-spacing:.08em}
  .market-search{
    width:calc(100% - 14px);
    grid-template-columns:1fr 1fr!important;
    border-radius:18px;
    box-shadow:
      0 0 0 4px rgba(250,249,241,.84),
      0 0 0 5px rgba(147,194,208,.3),
      0 12px 25px rgba(52,84,102,.17);
  }
  .market-keyword{grid-column:1/-1;min-height:50px}
  .market-search select{border-top:1px solid #e7ded1!important;border-left:0!important}
  .market-search button{grid-column:1/-1;min-height:52px}
  .adventure-actions{
    grid-template-columns:1fr!important;
    width:calc(100% - 14px);
    min-height:0;
    padding:7px 14px;
    border-radius:22px;
    box-shadow:
      0 0 0 4px rgba(250,249,241,.84),
      0 0 0 5px rgba(147,194,208,.3),
      0 12px 25px rgba(52,84,102,.15);
  }
  .adventure-actions button{min-height:58px;padding:7px 16px}
  .adventure-actions button{border-right:0!important;border-bottom:1px solid #eadcc7}
  .adventure-actions button:last-child{border-bottom:0}
  .category-grid{grid-template-columns:repeat(2,1fr);width:100%;padding:7px 9px}
  .category-grid button{grid-template-columns:68px minmax(0,1fr);min-height:112px;padding:7px}
  .category-grid button:nth-child(3n){border-right:1px solid #eadcc7!important}
  .category-grid button:nth-child(2n){border-right:0!important}
  .category-grid button:nth-child(n+4){border-bottom:1px solid #eadcc7!important}
  .category-grid button:nth-child(n+5){border-bottom:0!important}
  .category-grid button>img{width:68px;height:92px}
  .category-grid button b{font-size:16px}
  .category-grid button small{font-size:11px}
  .home-operations,.trust-strip,.legal-footer{width:min(100% - 20px,1320px)}
  .home-product-row{grid-template-columns:1fr!important}
  .home-mini-card{grid-template-columns:94px minmax(0,1fr)!important}
  .home-mini-card img,.home-mini-card .home-mini-placeholder{width:94px!important;height:104px!important}
  .market-heading{align-items:flex-start;flex-wrap:wrap}
  .market-tabs{order:3;width:100%;overflow:auto}
  .trust-strip{grid-template-columns:1fr 1fr!important}
  .view.active:not(#homeView){width:calc(100% - 20px)!important;margin:18px auto 28px!important}
  .panel{padding:18px!important;border-radius:20px!important}
  .filters,.two{grid-template-columns:1fr!important}
  .member-dashboard{grid-template-columns:1fr!important}
  .member-stat.wide{grid-column:span 1!important}
  .copy-row{grid-template-columns:1fr!important}
  .platform-statement{grid-template-columns:1fr;text-align:center;padding:16px}
  .platform-statement img{margin:0 auto}
  .doc{padding:24px 20px}
  .bottom-nav{
    display:grid!important;
    color:#d9e4ef!important;
    background:rgba(9,45,93,.97)!important;
  }
  .bottom-nav button,.bottom-nav a{color:#d9e4ef!important}
  .bottom-nav button.active,.bottom-nav a.active{color:#fff!important;background:var(--iro-teal)!important}
}

@media(max-width:520px){
  .adventure-actions .action-icon,
  .adventure-actions button:nth-child(2) .action-icon,
  .adventure-actions button:nth-child(3) .action-icon{
    width:42px;
    height:42px;
    min-width:42px;
  }
}
@media(max-width:420px){
  .category-grid{grid-template-columns:1fr}
  .category-grid button,
  .category-grid button:nth-child(2n),
  .category-grid button:nth-child(3n){
    border-right:0!important;
    border-bottom:1px solid #eadcc7!important;
  }
  .category-grid button:last-child{border-bottom:0!important}
  .trust-strip{grid-template-columns:1fr!important}
}