:root{--bg:#f5f6fb;--card:#fff;--text:#222;--muted:#666;--line:#e6e8ef;--main:#5865f2;--main-dark:#4752c4}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,"Noto Sans JP",sans-serif;line-height:1.7}a{color:var(--main);text-decoration:none}a:hover{text-decoration:underline}.inner{max-width:1000px;margin:0 auto;padding:0 14px}.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}.site-header .inner{display:flex;align-items:center;justify-content:space-between;min-height:58px;gap:12px}.logo{font-weight:800;font-size:22px;color:#222}.nav{display:flex;gap:12px;flex-wrap:wrap;font-size:14px}.nav a{color:#333}.main{padding:20px 0}.hero{background:linear-gradient(135deg,#5865f2,#7b61ff);color:#fff;border-radius:16px;padding:28px;margin-bottom:18px}.hero h1{margin:0 0 8px;font-size:30px}.box,.post-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin:14px 0;box-shadow:0 2px 10px rgba(0,0,0,.03)}.section-title{font-size:22px;margin:24px 0 12px}.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:#333;color:#fff!important;font-weight:700;padding:9px 14px;cursor:pointer;text-decoration:none!important}.btn.primary{background:var(--main)}.btn.primary:hover{background:var(--main-dark)}.btn.large{font-size:17px;padding:12px 18px}.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.cat-grid a{display:block;background:#f3f4ff;border:1px solid #dfe2ff;color:#333;border-radius:10px;padding:10px;text-align:center;font-weight:700}.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.tags a{background:#f1f2f7;color:#333;border-radius:999px;padding:4px 9px;font-size:13px}.tags.big a{font-size:14px;padding:6px 10px}.post-card{display:grid;grid-template-columns:54px 1fr;gap:12px}.avatar img,.detail-avatar{width:54px;height:54px;border-radius:50%;display:block}.post-card h2{font-size:18px;margin:2px 0 6px;line-height:1.45}.post-card p{margin:0;color:#444}.meta{display:flex;gap:8px;color:var(--muted);font-size:13px;flex-wrap:wrap}.cat{background:#eef0ff;color:#3943b7;border-radius:999px;padding:2px 8px;font-weight:700}.detail h1{font-size:25px;line-height:1.35;margin:0 0 8px}.detail-head{display:flex;gap:14px;align-items:flex-start}.body-text{font-size:16px}.copy-box{background:#f7f7f7;border:1px solid var(--line);border-radius:10px;padding:12px;margin:15px 0}.form label{display:block;font-weight:700;margin:14px 0 5px}input,select,textarea{width:100%;border:1px solid #ccd0dc;border-radius:8px;padding:10px;font-size:16px;background:#fff}textarea{resize:vertical}.hint{color:#666;font-size:13px;margin:4px 0}.notice{background:#fff8e1;border:1px solid #ffe08a;border-radius:10px;padding:10px;color:#5b4500}.error{background:#ffecec;border:1px solid #ffb3b3;color:#8a0000;border-radius:10px;padding:10px;margin:10px 0}.login-user{display:flex;gap:10px;align-items:center;background:#f6f7fb;border:1px solid var(--line);border-radius:10px;padding:10px}.login-user img{width:38px;height:38px;border-radius:50%}.adbox{border:1px dashed #bbb;background:#fafafa;color:#888;text-align:center;border-radius:12px;padding:18px;margin:16px 0}.pager{display:flex;justify-content:center;gap:10px;margin:18px 0}.pager a{background:#fff;border:1px solid var(--line);padding:8px 14px;border-radius:8px}.footer{border-top:1px solid var(--line);background:#fff;margin-top:30px;color:#666;font-size:13px;padding:20px 0}.admin-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.admin-grid div{background:#f6f7fb;border:1px solid var(--line);border-radius:10px;padding:15px;text-align:center}.admin-grid strong{display:block;font-size:28px}.admin-table{width:100%;border-collapse:collapse;font-size:14px}.admin-table th,.admin-table td{border-bottom:1px solid var(--line);padding:8px;text-align:left;vertical-align:top}.inline{display:inline}.inline select{width:auto;padding:5px;font-size:13px}.inline button{padding:5px 8px;margin-left:3px}.mini-avatar{width:28px;height:28px;border-radius:50%;vertical-align:middle}.search-form{display:flex;gap:8px}.search-form input{flex:1}@media(max-width:700px){.site-header .inner{display:block;padding-top:10px;padding-bottom:10px}.nav{margin-top:8px;gap:9px}.hero{padding:20px;border-radius:12px}.hero h1{font-size:25px}.cat-grid{grid-template-columns:repeat(2,1fr)}.post-card{grid-template-columns:44px 1fr;padding:12px}.avatar img,.detail-avatar{width:44px;height:44px}.post-card h2{font-size:16px}.detail h1{font-size:20px}.admin-grid{grid-template-columns:repeat(2,1fr)}.admin-table{font-size:12px}.search-form{display:block}.search-form button{margin-top:8px;width:100%}}


/* v0.7 recruit card UI */
.hero-compact{
  background:linear-gradient(135deg,#5865f2,#6c5ce7);
  color:#fff;
  border-radius:16px;
  padding:22px 18px;
  margin-bottom:14px;
}
.hero-compact h1{margin:4px 0 8px;font-size:30px;line-height:1.25}
.hero-compact p{max-width:760px}
.hero-compact .hero-label{margin:0 0 5px!important}
.compact-cta{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:#fff;border:2px solid #dfe2ff;border-radius:15px;padding:16px;margin:14px 0;
  box-shadow:0 4px 14px rgba(88,101,242,.08)
}
.compact-cta h2{margin:0 0 3px;font-size:19px}
.compact-cta p{margin:0;color:#555}
.btn.big-cta{font-size:16px;padding:11px 18px;border-radius:999px}
.category-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}
.category-strip a{
  display:block;background:#fff;border:1px solid #dfe2ff;color:#333;border-radius:10px;
  padding:10px 8px;text-align:center;font-weight:700;box-shadow:0 2px 7px rgba(0,0,0,.03)
}
.category-strip a:hover{background:#f2f4ff;text-decoration:none}
.tag-strip{background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px;margin:14px 0}
.strip-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.compact-tags{gap:6px}
.compact-tags a{background:#f6f7fb;border:1px solid #e4e6f0;color:#333;font-size:13px;padding:4px 9px}
.clean-list-head{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.clean-list-head .section-title{margin:12px 0 8px}
.btn.small{padding:7px 11px;font-size:13px}
.recruit-card{
  background:#fff;
  border:1px solid #e4e2f4;
  border-radius:15px;
  overflow:hidden;
  margin:14px 0;
  box-shadow:0 3px 12px rgba(0,0,0,.035);
}
.recruit-head{
  display:flex;
  align-items:center;
  gap:12px;
  background:#6453a6;
  color:#fff;
  padding:14px 16px;
}
.recruit-avatar{
  width:58px;
  height:58px;
  border-radius:50%;
  object-fit:cover;
  background:#fff;
  flex:0 0 auto;
}
.recruit-user{
  flex:1;
  min-width:0;
}
.recruit-user strong{
  display:block;
  font-size:19px;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.recruit-user span{
  display:block;
  max-width:100%;
  font-size:14px;
  font-weight:600;
  letter-spacing:0;
  line-height:1.35;
  margin-top:5px;
  color:rgba(255,255,255,.88);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.discord-id-inline{
  display:inline-flex;
  align-items:center;
  width:auto;
  max-width:100%;
  font-size:14px;
  font-weight:700;
  letter-spacing:0;
  line-height:1.2;
  margin-top:6px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  appearance:none;
  -webkit-appearance:none;
  border:1px solid rgba(255,255,255,.45);
  background:rgba(255,255,255,.94);
  color:#2f6fdd;
  padding:6px 14px;
  text-align:left;
  cursor:pointer;
  border-radius:999px;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.06);
}
.discord-id-inline:hover{
  background:#fff;
  color:#255fcb;
  text-decoration:none;
}
.discord-id-inline:focus-visible{
  outline:none;
  background:#fff;
  color:#255fcb;
}
.discord-id-inline.copied{
  background:#fff;
  color:#255fcb;
  opacity:1;
}

.id-copy-head{
  border:0;
  border-radius:8px;
  background:#fff;
  color:#6453a6;
  padding:9px 14px;
  font-weight:900;
  font-size:15px;
  cursor:pointer;
  white-space:nowrap;
}
.recruit-content{
  padding:15px 16px 14px;
}
.recruit-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}
.recruit-tags a{
  display:inline-flex;
  align-items:center;
  background:#9185c8;
  color:#fff;
  border-radius:0;
  padding:5px 11px;
  font-size:13px;
  font-weight:700;
  text-decoration:none;
}
.recruit-text-link{
  display:block;
  color:#222;
  text-decoration:none!important;
}
.recruit-text{
  font-size:20px;
  line-height:1.85;
  color:#222;
  white-space:normal;
  margin:8px 0 18px;
}
.recruit-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:#9aa0a6;
  font-size:14px;
}
.recruit-foot .report-link{
  color:#9aa0a6;
}
.recruit-foot span{
  background:#c3c8d0;
  color:#fff;
  padding:7px 13px;
  border-radius:0;
  font-weight:700;
}
.discord-contact-line{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  background:#f6f4ff;
  border:1px solid #ded8ff;
  border-radius:12px;
  padding:12px;
  margin:16px 0 8px;
}
.discord-contact-line span{
  font-size:13px;
  color:#555;
  font-weight:700;
}
.discord-contact-line code{
  background:#fff;
  border:1px solid #e3def7;
  border-radius:8px;
  padding:7px 10px;
  font-size:18px;
  font-weight:800;
}
.copy-btn{
  margin-left:auto;
  background:#5865f2;
}
.copy-message{
  background:#e8fff0;
  border:1px solid #aee7bf;
  color:#126b2f;
  border-radius:999px;
  padding:5px 10px;
  font-size:13px;
  margin:0 0 12px;
}
.form-card h1{
  margin-top:0;
}
.form textarea{
  font-size:17px;
}
.cta-mini{display:flex;align-items:center;justify-content:center;gap:12px;background:#f7f8ff;border:1px solid #dfe2ff;border-radius:14px;padding:14px;margin:14px 0;font-weight:700}
@media(max-width:700px){
  .hero-compact{padding:18px 15px;border-radius:13px}
  .hero-compact h1{font-size:25px}
  .compact-cta{display:block;padding:14px}
  .compact-cta .btn{width:100%;margin-top:11px}
  .category-strip{grid-template-columns:repeat(2,1fr);gap:7px}
  .category-strip a{padding:9px 6px;font-size:14px}
  .tag-strip{padding:12px}
  .compact-tags a:nth-child(n+13){display:none}
  .recruit-card{
    border-radius:13px;
    margin:12px 0;
  }
  .recruit-head{
    padding:12px;
    gap:10px;
  }
  .recruit-avatar{
    width:50px;
    height:50px;
  }
  .recruit-user strong{
    font-size:17px;
  }
  .recruit-user span{
    font-size:13px;
  }
  .discord-id-inline{
    font-size:13px;
    padding:5px 12px;
    margin-top:5px;
  }
  .id-copy-head{
    padding:8px 10px;
    font-size:13px;
  }
  .recruit-content{
    padding:13px;
  }
  .recruit-tags{
    gap:7px;
    margin-bottom:10px;
  }
  .recruit-tags a{
    font-size:12px;
    padding:4px 9px;
  }
  .recruit-text{
    font-size:17px;
    line-height:1.75;
    margin:8px 0 16px;
  }
  .discord-contact-line{
    display:block;
  }
  .discord-contact-line code{
    display:block;
    margin:6px 0 9px;
    word-break:break-all;
    font-size:16px;
  }
  .discord-contact-line .btn{
    width:100%;
  }
  .cta-mini{display:block;text-align:center}
  .cta-mini .btn{width:100%;margin-top:8px}
}


/* v0.8 admin/category management */
.admin-menu{display:flex;flex-wrap:wrap;gap:8px}
.admin-add-form{background:#f8f9ff;border:1px solid #e1e4ff;border-radius:12px;padding:12px;margin:10px 0 22px}
.category-table input,.category-table select{min-width:110px;padding:7px;font-size:14px}
.category-table input[name="name"]{min-width:160px}
.category-inline{display:inline}
.btn.small{padding:7px 10px;font-size:13px;margin:2px}
@media(max-width:700px){
  .admin-menu .btn{width:100%}
  .admin-table{display:block;overflow-x:auto;white-space:nowrap}
}


/* v0.9 tag-only UI */
.category-strip{display:none!important}
.tag-strip-main{margin-top:14px}
.tag-check-grid{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:8px 0 4px;
}
.tag-check{
  display:inline-flex!important;
  margin:0!important;
  cursor:pointer;
}
.tag-check input{
  position:absolute;
  width:1px;
  height:1px;
  margin:0;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
}
.tag-check span{
  display:inline-flex;
  align-items:center;
  border:1px solid #d7d9e8;
  background:#fff;
  color:#333;
  border-radius:999px;
  padding:7px 12px;
  font-size:14px;
  font-weight:700;
}
.tag-check input:checked + span{
  background:#5865f2;
  color:#fff;
  border-color:#5865f2;
}
.recruit-tags:empty{
  display:none;
}
@media(max-width:700px){
  .tag-check-grid{
    gap:7px;
  }
  .tag-check span{
    font-size:13px;
    padding:6px 10px;
  }
}


/* v1.0 tag management */
.admin-menu{display:flex;flex-wrap:wrap;gap:8px}
.admin-add-form{background:#f8f9ff;border:1px solid #e1e4ff;border-radius:12px;padding:12px;margin:10px 0 22px}
.tag-table input,.tag-table select{min-width:110px;padding:7px;font-size:14px}
.tag-table input[name="name"]{min-width:160px}
.tag-inline{display:inline}
.btn.small{padding:7px 10px;font-size:13px;margin:2px}
@media(max-width:700px){
  .admin-menu .btn{width:100%}
  .admin-table{display:block;overflow-x:auto;white-space:nowrap}
}


/* v1.1 SEO page UI */
.tag-hero{
  background:#fff;
  border:1px solid #e4e6f0;
  border-radius:16px;
  padding:18px;
  margin:14px 0;
  box-shadow:0 3px 12px rgba(0,0,0,.03);
}
.tag-hero h1{
  margin:4px 0 8px;
  font-size:26px;
  line-height:1.35;
}
.tag-hero p{
  color:#555;
  margin:0 0 12px;
}
.tag-hero-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.tag-result-count{
  background:#f1f2f7;
  color:#555;
  border-radius:999px;
  padding:5px 10px;
  font-size:13px;
  font-weight:800;
}
@media(max-width:700px){
  .tag-hero{
    padding:15px;
    border-radius:13px;
  }
  .tag-hero h1{
    font-size:21px;
  }
  .tag-hero-actions .btn{
    width:100%;
  }
}

/* v1.2 friend/server split */
.mode-tabs{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
  margin:12px 0 14px;
}
.mode-tabs a{
  display:block;
  text-align:center;
  background:#fff;
  border:1px solid #dfe2ff;
  border-radius:12px;
  padding:11px 10px;
  color:#333;
  font-weight:900;
  text-decoration:none!important;
  box-shadow:0 2px 8px rgba(0,0,0,.03);
}
.mode-tabs a.active{
  background:#5865f2;
  border-color:#5865f2;
  color:#fff;
}
.server-hero{
  background:linear-gradient(135deg,#2f855a,#5865f2);
}
.server-cta{
  border-color:#bfe8d4;
}
.server-mini-guide{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:#fff;
  border:1px solid #dfe2ff;
  border-radius:12px;
  padding:10px;
  margin:12px 0;
  color:#555;
  font-size:14px;
}
.server-mini-guide a{font-weight:900}
.post-type-badge{
  display:inline-flex;
  align-items:center;
  margin:0 0 10px;
  padding:4px 9px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  background:#eef0ff;
  color:#3943b7;
}
.post-type-badge.server{
  background:#e7f8ef;
  color:#146c43;
}
.server-card .recruit-head{
  background:#2f855a;
}
.server-card .id-copy-head,
.server-card .server-join-head{
  color:#2f855a;
}
.server-join-head{
  text-decoration:none!important;
}
.type-select-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin:8px 0 14px;
}
.type-select{
  margin:0!important;
  cursor:pointer;
}
.type-select input{
  display:none;
}
.type-select span{
  display:block;
  border:2px solid #dfe2ff;
  background:#fff;
  border-radius:13px;
  padding:12px;
}
.type-select input:checked + span{
  border-color:#5865f2;
  background:#f2f4ff;
}
.type-select strong{
  display:block;
  font-size:16px;
}
.type-select small{
  display:block;
  color:#666;
  font-weight:600;
  margin-top:2px;
}
.server-only-field{
  display:none;
}
.create-form.is-server .server-only-field{
  display:block;
}
.create-form.is-server .friend-copy-box{
  display:none;
}
.search-form-extended select{
  max-width:180px;
}
.server-contact-line .btn{
  margin-left:0;
}
@media(max-width:700px){
  .mode-tabs{gap:7px}
  .mode-tabs a{padding:10px 8px;font-size:14px}
  .server-mini-guide{display:block;text-align:center}
  .server-mini-guide a{display:block;margin-top:4px}
  .type-select-grid{grid-template-columns:1fr}
  .search-form-extended select{max-width:none;margin-top:8px}
  .server-contact-line .btn{width:100%;margin-top:8px}
}

/* Server invite auto fetch display */
.server-card .recruit-avatar {
    object-fit: cover;
    background: #f1f5f9;
}
.server-meta-line {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 10px;
    color: #64748b;
    font-size: 13px;
}
.server-meta-line span {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 4px 9px;
}

/* 管理サーバー選択 */
.server-select-box .login-user { margin: 14px 0 18px; }
.guild-select-grid { display: grid; gap: 12px; margin-top: 16px; }
.guild-select-card { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid #e5e7eb; border-radius: 14px; background: #fff; }
.guild-select-icon { width: 52px; height: 52px; border-radius: 16px; object-fit: cover; background: #f3f4f6; flex: 0 0 auto; }
.guild-select-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.guild-select-main strong { font-size: 16px; }
.guild-select-main span { color: #6b7280; font-size: 13px; line-height: 1.5; }
.guild-select-card .btn[disabled] { opacity: .55; cursor: not-allowed; }
@media (max-width: 640px) {
  .guild-select-card { align-items: flex-start; }
  .guild-select-card .btn { margin-left: auto; }
}

/* Bot連携サーバー掲載 */
.selected-guild-panel{
  display:flex;align-items:center;gap:12px;background:#f6f7fb;border:1px solid var(--line);border-radius:14px;padding:14px;margin:14px 0;
}
.selected-guild-panel .guild-select-icon{width:58px;height:58px;border-radius:16px;object-fit:cover;background:#fff;flex:0 0 auto}
.server-create-box h2{margin:0 0 8px;font-size:20px}.bot-step-notice h2{margin:0 0 6px}.notice.success{background:#ecfff1;border-color:#a9e7b8;color:#185a28}.server-create-form{margin-top:14px}
@media(max-width:700px){.selected-guild-panel{align-items:flex-start}.selected-guild-panel .guild-select-icon{width:50px;height:50px;border-radius:14px}}

/* My posts */
.my-posts-box .lead{color:#555;margin-top:-4px}.login-user-box{display:flex;align-items:center;gap:10px;background:#f6f7fb;border:1px solid #e5e7f0;border-radius:10px;padding:10px 12px;margin:16px 0}.login-avatar{width:34px;height:34px;border-radius:50%}.my-posts-list{display:grid;gap:12px;margin-top:16px}.my-post-item{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:16px;box-shadow:0 1px 2px rgba(0,0,0,.03)}.my-post-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}.my-post-status{font-size:12px;background:#eef2ff;color:#4338ca;border-radius:999px;padding:4px 8px}.my-post-date{font-size:12px;color:#777}.my-post-item h2{font-size:18px;margin:6px 0}.my-post-item p{color:#333;line-height:1.7;margin:0}.my-post-actions{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}.my-post-actions form{margin:0}.btn.small{padding:7px 11px;font-size:13px}.btn.danger{background:#dc2626;color:#fff;border-color:#dc2626}.btn.danger:hover{filter:brightness(.95)}.empty-state{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:28px;text-align:center;margin-top:16px}.empty-state h2{margin-top:0}
@media(max-width:700px){.my-post-item{padding:14px}.my-post-actions .btn{width:auto}.nav{gap:10px;flex-wrap:wrap}}

/* Access stats */
.access-box .hint{margin-top:-4px}.access-summary{margin-top:12px}.break-all{word-break:break-all}
@media(max-width:700px){.access-summary{grid-template-columns:repeat(2,1fr)}}

/* Friend gender selection */
.gender-radio-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:6px 0 4px;
}
.gender-radio{
  display:flex!important;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:2px solid #e5e7eb;
  border-radius:12px;
  padding:12px 10px;
  margin:0!important;
  background:#fff;
  cursor:pointer;
  font-weight:800!important;
}
.gender-radio input{width:auto;margin:0;accent-color:#5865f2}
.gender-radio span{line-height:1}
.gender-radio:has(input:checked){border-color:#5865f2;background:#f3f4ff}
.gender-option-male:has(input:checked){border-color:#5865f2;background:#eef2ff}
.gender-option-female:has(input:checked){border-color:#ec4899;background:#fff1f7}
.gender-option-unset:has(input:checked){border-color:#16a34a;background:#effaf2}

/* Friend card color by selected gender */
.recruit-card.friend-card.gender-male .recruit-head,
.recruit-head.gender-male{
  background:#5865f2;
}
.recruit-card.friend-card.gender-female .recruit-head,
.recruit-head.gender-female{
  background:#ec4899;
}
.recruit-card.friend-card.gender-unset .recruit-head,
.recruit-head.gender-unset{
  background:#2e8b57;
}
.recruit-card.friend-card.gender-male .id-copy-head,
.recruit-head.gender-male .id-copy-head{color:#5865f2}
.recruit-card.friend-card.gender-female .id-copy-head,
.recruit-head.gender-female .id-copy-head{color:#ec4899}
.recruit-card.friend-card.gender-unset .id-copy-head,
.recruit-head.gender-unset .id-copy-head{color:#2e8b57}
@media(max-width:700px){.gender-radio-grid{grid-template-columns:1fr}.gender-radio{justify-content:flex-start}}


/* top CTA layout restore */
.top-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:14px 0;
}
.top-tabs a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  background:#fff;
  border:1px solid #dfe2ff;
  color:#222;
  border-radius:12px;
  font-weight:800;
  text-decoration:none!important;
  box-shadow:0 2px 8px rgba(0,0,0,.025);
}
.top-tabs a.active{
  background:#5865f2;
  border-color:#5865f2;
  color:#fff;
}
.cta-only-card{
  justify-content:center;
  padding:18px;
}
.cta-only-card .btn{
  width:100%;
  max-width:760px;
  min-height:54px;
  border-radius:999px;
}
.server-guide-card{
  background:#fff;
  border:1px solid #e4e6f0;
  border-radius:14px;
  padding:14px 16px;
  margin:14px 0;
  text-align:center;
  box-shadow:0 2px 10px rgba(0,0,0,.025);
}
.server-guide-card p{
  margin:0 0 4px;
  color:#555;
  font-weight:600;
}
.server-guide-card a{
  font-weight:900;
  font-size:17px;
  color:#5865f2;
}
@media(max-width:700px){
  .top-tabs{
    gap:8px;
    margin:12px 0;
  }
  .top-tabs a{
    min-height:46px;
    font-size:16px;
  }
  .cta-only-card{
    padding:14px;
    border-radius:14px;
  }
  .cta-only-card .btn{
    max-width:none;
    min-height:52px;
    font-size:17px;
  }
  .server-guide-card{
    padding:13px 12px;
  }
}


/* v1.3 early post notice */
.early-post-notice{
  background:#f7f8ff;
  border:1px solid #dfe2ff;
  border-radius:12px;
  padding:12px 14px;
  margin:12px 0 14px;
  color:#333;
  box-shadow:0 2px 8px rgba(0,0,0,.025);
}
.early-post-notice strong{
  display:block;
  font-size:15px;
  margin-bottom:4px;
}
.early-post-notice p{
  margin:0;
  color:#555;
  font-size:14px;
  line-height:1.7;
}
@media(max-width:700px){
  .early-post-notice{
    padding:11px 12px;
    margin:11px 0 13px;
  }
  .early-post-notice p{
    font-size:13px;
  }
}


/* v1.3 tag hero readability fix */
.tag-hero.server-hero{
  color:#fff;
}
.tag-hero.server-hero .hero-label{
  color:rgba(255,255,255,.88);
  font-weight:800;
}
.tag-hero.server-hero h1{
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.18);
}
.tag-hero.server-hero p{
  color:#fff;
  font-weight:700;
  opacity:1;
  text-shadow:0 1px 2px rgba(0,0,0,.22);
  max-width:850px;
}
.tag-hero.server-hero .tag-hero-actions{
  margin-top:14px;
}
.tag-hero.server-hero .btn{
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}

@media(max-width:700px){
  .tag-hero.server-hero p{
    font-size:14px;
    line-height:1.75;
  }

}
.friend-create-form .btn.primary {
    width: 100%;
    min-height: 52px;
    margin-top: 12px;
    padding: 14px 18px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 12px;
}