/* ==========================================================================
   Export Lab — Community Design System
   Palette: cream paper / deep navy ink / trade-route teal / cargo mustard
   ========================================================================== */

:root{
  --el-cream:        #F8F4EA;
  --el-cream-deep:    #F0EAD9;
  --el-paper:         #FFFFFF;
  --el-navy:          #16233F;
  --el-navy-panel:    #22355C;
  --el-navy-soft:     #40506E;
  --el-ink-faint:     #8892A6;
  --el-teal:          #2F8F82;
  --el-teal-deep:     #226B62;
  --el-teal-tint:     #E4F1EE;
  --el-mustard:       #EAAA3C;
  --el-mustard-deep:  #C88A24;
  --el-mustard-tint:  #FBF0DC;
  --el-sky:           #6FA3C7;
  --el-sage:          #8FAE79;
  --el-coral:         #D8785A;
  --el-line:          #E4DCC8;
  --el-line-soft:     #ECE5D4;
  --el-shadow:        0 2px 4px rgba(22,35,63,.04), 0 8px 24px rgba(22,35,63,.06);
  --el-shadow-lift:   0 6px 12px rgba(22,35,63,.06), 0 20px 40px rgba(22,35,63,.10);
  --el-radius-s:      8px;
  --el-radius-m:      14px;
  --el-radius-l:      22px;
  --header-h: 58px;
  --font-display: "Zen Old Mincho", "Source Serif 4", serif;
  --font-word:    "Source Serif 4", "Zen Old Mincho", serif;
  --font-body:    "Noto Sans JP", "Inter", sans-serif;
  --font-mono:    "JetBrains Mono", monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--el-cream);
  color:var(--el-navy);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:2px solid var(--el-teal); outline-offset:2px; }

.wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }
@media (max-width:720px){ .wrap{ padding:0 18px; } }

/* ---------- Header (navy — matches the sidebar itself; sticky, compact) ---------- */
.el-header{
  position:sticky; top:var(--gh-h, 0px); z-index:45;
  background:var(--el-navy-panel);
  box-shadow:0 2px 8px rgba(22,35,63,.10);
}
.el-header-inner{
  display:flex; align-items:center; gap:16px;
  height:var(--header-h);
  padding:0 24px;
}
.el-logo{
  display:flex; align-items:baseline; gap:8px;
  font-family:var(--font-word);
  font-size:19px; font-weight:600; letter-spacing:.01em;
  color:#fff; flex-shrink:0;
}
.el-logo .dot{ color:var(--el-mustard); }
.el-menu-toggle{
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:8px; border:none;
  background:none; color:#fff; flex-shrink:0;
  transition:background .15s;
}
.el-menu-toggle svg{ width:19px; height:19px; }
.el-menu-toggle:hover{ background:rgba(255,255,255,.16); }
.el-header-actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; margin-left:auto; }
.el-search{
  display:flex; align-items:center; gap:6px;
  background:var(--el-paper); border:1px solid var(--el-line);
  border-radius:999px; padding:7px 14px; font-size:14px; color:var(--el-ink-faint);
  min-width:150px;
}
.el-search svg{ width:14px; height:14px; flex-shrink:0; }
.el-avatar{
  width:34px; height:34px; border-radius:50%;
  background:linear-gradient(135deg,var(--el-teal),var(--el-navy));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; flex-shrink:0;
}
.el-burger{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:8px; border:1px solid var(--el-line);
  background:var(--el-paper); flex-shrink:0;
}

/* ---------- App shell: persistent left sidebar + content column ---------- */
.el-app{ display:flex; align-items:stretch; }
.el-sidebar-wrap{
  position:relative; flex-shrink:0;
  transition:width .2s ease;
}
.el-sidebar{
  width:232px;
  background:var(--el-navy-panel);
  height:calc(100vh - var(--gh-h, 0px) - var(--header-h));
  position:sticky; top:calc(var(--gh-h, 0px) + var(--header-h));
  padding:20px 14px 40px;
  overflow-y:auto; overflow-x:hidden;
  transition:width .2s ease, padding .2s ease;
  white-space:nowrap;
  box-shadow:2px 0 12px rgba(22,35,63,.10);
}
.el-sidebar h5{
  font-size:11.5px; letter-spacing:.1em; color:#7E8CAC;
  text-transform:uppercase; margin:22px 10px 8px;
}
.el-sidebar h5:first-child{ margin-top:4px; }
.el-sidebar nav a{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:8px; margin-bottom:2px;
  font-size:14.5px; font-weight:500; color:#C3CBE0;
  transition:background .15s, color .15s;
}
.el-sidebar nav a svg{ width:16px; height:16px; flex-shrink:0; color:#7E8CAC; }
.el-sidebar nav a:hover{ background:rgba(255,255,255,.08); color:#fff; }
.el-sidebar nav a.is-active{ background:var(--el-teal); color:#fff; font-weight:700; }
.el-sidebar nav a.is-active svg{ color:#fff; }
.el-sidebar nav a .dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.el-sidebar nav a .count{ margin-left:auto; font-size:12px; color:#7E8CAC; }
.el-sidebar-divider{ height:1px; background:rgba(255,255,255,.12); margin:16px 10px; }
.el-content{ flex:1; min-width:0; }

/* Expandable フォーラム tree in the sidebar */
.el-side-forum{ margin-bottom:2px; }
.el-side-forum > summary{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:8px; margin-bottom:2px;
  font-size:14.5px; font-weight:500; color:#C3CBE0;
  cursor:pointer; list-style:none; transition:background .15s, color .15s;
}
.el-side-forum > summary::-webkit-details-marker{ display:none; }
.el-side-forum > summary:hover{ background:rgba(255,255,255,.08); color:#fff; }
.el-side-forum > summary.is-active{ background:var(--el-teal); color:#fff; font-weight:700; }
.el-side-forum > summary svg:first-child{ width:16px; height:16px; flex-shrink:0; color:#7E8CAC; }
.el-side-forum > summary.is-active svg:first-child{ color:#fff; }
.el-side-forum > summary .lbl{ flex:1; min-width:0; }
.el-side-forum > summary svg.chev{
  width:20px; height:20px; padding:4px; box-sizing:border-box;
  margin-left:auto; flex-shrink:0;
  color:#fff; background:rgba(255,255,255,.14); border-radius:50%;
  transition:transform .15s, background .15s;
}
.el-side-forum > summary:hover svg.chev{ background:rgba(255,255,255,.26); }
.el-side-forum[open] > summary svg.chev{ transform:rotate(90deg); }

.el-side-sub{
  padding-left:16px; margin:2px 0 10px 20px;
  border-left:1px solid rgba(255,255,255,.14);
}
.el-side-sub > a{
  display:block; padding:7px 10px; border-radius:7px;
  font-size:13.5px; color:#AEB8D2;
}
.el-side-sub > a:hover{ background:rgba(255,255,255,.08); color:#fff; }
.el-side-cta{
  display:flex !important; align-items:center; justify-content:flex-start; gap:7px;
  background:rgba(255,255,255,.14);
  border:none;
  border-radius:14px !important;
  padding:10px 12px !important;
  margin-bottom:12px;
  font-size:13px !important; font-weight:700;
  color:#fff !important;
  white-space:normal !important;
  text-align:left;
  line-height:1.3;
}
.el-side-cta:hover{ background:rgba(255,255,255,.24); }
.el-side-cta svg{ width:14px; height:14px; flex-shrink:0; color:#fff; }
.el-side-sub-label{
  font-size:10.5px; letter-spacing:.08em; color:#7E8CAC;
  text-transform:uppercase; margin:14px 10px 4px;
}
.el-side-sub details{ margin-bottom:1px; }
.el-side-sub details summary{
  display:flex; align-items:center; gap:6px;
  padding:7px 10px; border-radius:7px; cursor:pointer;
  font-size:13.5px; font-weight:600; color:#AEB8D2; list-style:none;
}
.el-side-sub details summary::-webkit-details-marker{ display:none; }
.el-side-sub details summary:hover{ background:rgba(255,255,255,.08); color:#fff; }
.el-side-sub details summary svg{
  width:17px; height:17px; padding:3px; box-sizing:border-box;
  margin-left:auto; flex-shrink:0;
  color:#fff; background:rgba(255,255,255,.10); border-radius:50%;
  transition:transform .15s, background .15s;
}
.el-side-sub details summary:hover svg{ background:rgba(255,255,255,.22); }
.el-side-sub details[open] summary svg{ transform:rotate(90deg); }
.el-side-sub2{ padding-left:14px; }
.el-side-sub2 a{
  display:block; padding:6px 10px; border-radius:7px;
  font-size:12.5px; color:#8D97B5;
}
.el-side-sub2 a:hover{ background:rgba(255,255,255,.08); color:#fff; }

.el-side-sub .el-side-cat{ margin:8px 0 2px; }
.el-side-sub .el-side-cat > summary{
  font-size:13.5px; color:#AEB8D2; font-weight:500;
  padding:7px 10px;
  display:flex; align-items:center; gap:6px;
  cursor:pointer; list-style:none; border-radius:7px;
}
.el-side-sub .el-side-cat > summary::-webkit-details-marker{ display:none; }
.el-side-sub .el-side-cat > summary:hover{ background:rgba(255,255,255,.08); color:#fff; }
.el-side-sub .el-side-cat > summary svg{
  width:17px; height:17px; padding:3px; box-sizing:border-box;
  margin-left:auto; flex-shrink:0;
  color:#fff; background:rgba(255,255,255,.10); border-radius:50%;
  transition:transform .15s, background .15s;
}
.el-side-sub .el-side-cat > summary:hover svg{ background:rgba(255,255,255,.22); }
.el-side-sub .el-side-cat[open] > summary svg{ transform:rotate(90deg); }
.el-side-cat-body{ padding-top:2px; }

/* Desktop: the header hamburger shrinks the sidebar to an icon rail, not fully hidden */
@media (min-width:901px){
  .el-app.is-toggled .el-sidebar{
    width:62px; padding-left:8px; padding-right:8px;
  }
  .el-app.is-toggled .el-sidebar .lbl,
  .el-app.is-toggled .el-sidebar .count,
  .el-app.is-toggled .el-sidebar .chev,
  .el-app.is-toggled .el-sidebar h5,
  .el-app.is-toggled .el-sidebar .el-sidebar-divider,
  .el-app.is-toggled .el-sidebar .el-side-sub{
    display:none;
  }
  .el-app.is-toggled .el-sidebar nav > a,
  .el-app.is-toggled .el-sidebar nav > details > summary{
    justify-content:center; padding-left:0; padding-right:0;
  }
}

@media (max-width:900px){
  .el-sidebar{
    display:none;
    position:fixed; left:0; right:0;
    top:calc(var(--gh-h, 0px) + var(--header-h));
    bottom:0; width:auto; z-index:60;
    background:var(--el-navy-panel); min-height:0;
  }
  .el-app.is-toggled .el-sidebar{ display:block; width:232px; padding:20px 14px 40px; }
  .el-app.is-toggled .el-sidebar .lbl,
  .el-app.is-toggled .el-sidebar .count{ display:inline; }
  .el-app{ display:block; }
}

.el-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 20px; border-radius:999px; border:none;
  font-size:14.5px; font-weight:700; letter-spacing:.02em;
  transition:transform .15s, box-shadow .15s, background .15s;
}
.el-btn:active{ transform:translateY(1px); }
.el-btn--primary{ background:var(--el-teal); color:#fff; box-shadow:var(--el-shadow); }
.el-btn--primary:hover{ background:var(--el-teal-deep); }
.el-btn--mustard{ background:var(--el-mustard); color:var(--el-navy); box-shadow:var(--el-shadow); }
.el-btn--mustard:hover{ background:var(--el-mustard-deep); color:#fff; }
.el-btn--ghost{ background:transparent; color:var(--el-navy); border:1.5px solid var(--el-line); }
.el-btn--ghost:hover{ border-color:var(--el-navy); }
.el-btn--sm{ padding:7px 14px; font-size:13.5px; }

/* ---------- Hero (top page) — background illustration + hero content rendered in code ---------- */
.el-hero{
  position:relative;
  background-image:url("hero-bg.png");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  background-color:var(--el-cream);
  aspect-ratio:1726/911;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 24px;
}
.el-hero::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:34px;
  background:linear-gradient(to bottom, rgba(248,244,234,0) 0%, var(--el-cream) 100%);
  pointer-events:none;
}
.el-hero-content{
  position:relative; z-index:1;
  max-width:720px; margin:0 auto;
  text-align:center;
}
.el-hero-content .eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; letter-spacing:.1em; color:var(--el-navy);
  font-weight:700; margin-bottom:6px;
}
.el-hero-word{
  font-family:var(--font-word); font-weight:600;
  font-size:clamp(48px,8vw,84px); line-height:1;
  color:var(--el-navy); margin:2px 0 14px;
}
.el-hero-divider{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-bottom:20px;
}
.el-hero-divider span{ width:34px; height:1.5px; }
.el-hero-divider span:first-child{ background:var(--el-teal); }
.el-hero-divider span:last-child{ background:var(--el-sky); }
.el-hero-divider i{ width:7px; height:7px; border-radius:50%; background:var(--el-mustard); display:block; }
.el-hero-content .sub{ color:var(--el-navy-soft); font-size:15.5px; line-height:1.8; margin:0 0 32px; }
.el-hero-sub-hand{ display:inline-block; margin:0 0 32px; }
.el-hero-sub-hand p{
  font-family:"Klee One","Yomogi",var(--font-body);
  font-weight:600;
  color:var(--el-mustard-deep); font-size:18px; line-height:1.9;
  margin:0;
}
.el-hero-sub-underline{ width:100%; height:12px; display:block; margin-top:2px; }

.el-hero-icons{
  display:flex; align-items:center; justify-content:center;
  gap:0; margin:0 auto 30px; flex-wrap:wrap;
}
.el-hero-icons .item{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:0 26px;
}
.el-hero-icons .item + .item{ border-left:1px solid var(--el-line); }
.el-hero-icons .ic{
  width:52px; height:52px; border-radius:50%;
  background:var(--el-paper); box-shadow:var(--el-shadow);
  display:flex; align-items:center; justify-content:center;
  color:var(--el-navy);
}
.el-hero-icons .item span{ font-size:13.5px; font-weight:600; color:var(--el-navy-soft); }
@media (max-width:560px){
  .el-hero-icons .item{ padding:0 14px; }
  .el-hero-icons .item + .item{ border-left:none; }
}

.el-hero-cta-bar{
  display:flex; align-items:center; gap:16px;
  max-width:380px; margin:0 auto;
  background:var(--el-paper); border-radius:22px;
  border:1.5px solid var(--el-mustard);
  padding:20px 22px;
  box-shadow:var(--el-shadow-lift);
  transition:transform .18s, box-shadow .18s;
}
.el-hero-cta-bar:hover{ transform:translateY(-2px); box-shadow:0 10px 20px rgba(22,35,63,.10), 0 24px 48px rgba(22,35,63,.14); }
.el-hero-cta-bar .pencil{
  width:46px; height:46px; border-radius:50%; flex-shrink:0;
  background:var(--el-teal); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.el-hero-cta-bar .text{ flex:1; text-align:left; min-width:0; }
.el-hero-cta-bar .text strong{ display:block; font-size:15.5px; font-weight:700; color:var(--el-navy); line-height:1.4; }
.el-hero-cta-bar .text span{ display:block; font-size:13px; color:var(--el-ink-faint); margin-top:3px; }
.el-hero-cta-bar .arrow{
  width:40px; height:40px; border-radius:50%; flex-shrink:0; border:none;
  background:var(--el-mustard); color:var(--el-navy);
  display:flex; align-items:center; justify-content:center;
  transition:background .15s;
}
.el-hero-cta-bar .arrow:hover{ background:var(--el-mustard-deep); color:#fff; }

/* ---------- Official お知らせ box (top page) — visually distinct from the forum feed cards ---------- */
.el-announce-box{
  background:linear-gradient(180deg, #FBF1EA 0%, var(--el-paper) 220px);
  border:1.5px solid #F0D9C8;
  border-radius:var(--el-radius-l);
  overflow:hidden;
  box-shadow:0 2px 4px rgba(216,120,90,.05), 0 10px 24px rgba(216,120,90,.06);
}
.el-announce-row{
  display:flex; align-items:center; gap:14px;
  padding:15px 22px;
  border-bottom:1px solid #F3E2D5;
  transition:background .15s;
}
.el-announce-row:last-child{ border-bottom:none; }
.el-announce-row:hover{ background:#FBF0E9; }
.el-announce-row .ic{
  width:32px; height:32px; border-radius:10px; flex-shrink:0;
  color:#fff; display:flex; align-items:center; justify-content:center;
}
.el-announce-row-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.el-announce-row-main .title{ font-size:15px; font-weight:700; color:var(--el-navy); }
.el-announce-row:hover .title{ text-decoration:underline; text-underline-offset:3px; }
.el-announce-row-main .meta{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--el-ink-faint); }
.el-announce-arrow{
  flex-shrink:0; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--el-coral); background:#F7E4DC;
  transition:transform .15s;
}
.el-announce-row:hover .el-announce-arrow{ transform:translateX(3px); }

/* ---------- Top-page feed sections (お知らせ／NEW／HOT／SHiFT限定／コミュニティ — always-visible, not tabs) ---------- */
.el-feed-head{
  display:flex; align-items:center; gap:12px;
  margin:0 0 14px;
}
.el-feed-head .feed-ic{
  width:34px; height:34px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--feed-color, var(--el-navy));
}
.el-feed-head h2{
  font-family:var(--font-display); font-weight:600; margin:0;
  font-size:21px; color:var(--el-navy);
}
.el-feed-head h3{
  font-family:var(--font-display); font-weight:600; margin:0;
  font-size:18px; color:var(--el-navy);
}
.el-hub-note{
  display:flex; align-items:center; gap:8px;
  font-size:12.5px; color:var(--el-ink-faint);
  padding:0 4px 12px;
}
.el-hub-note svg{ width:13px; height:13px; flex-shrink:0; }
.el-note-link{
  background:none; border:none; padding:0; margin:0;
  font-size:12.5px; font-weight:700; color:var(--el-teal-deep);
  text-decoration:underline; text-underline-offset:2px; cursor:pointer;
}
.el-note-link:hover{ color:var(--el-navy); }

/* SHiFT member-only excerpt: first ~15 chars readable, remainder blurred */
.el-blur-preview{ display:inline; }
.el-blur-tail{
  filter:blur(4.5px);
  -webkit-filter:blur(4.5px);
  user-select:none;
  -webkit-user-select:none;
}
.badge--member{ background:#EEE7F6; color:#6B4FA0; }
.badge--open{ background:var(--el-line-soft); color:var(--el-navy-soft); }
.badge--restricted{ background:#E8F1F6; color:#3E7EA3; }
.badge--solved{ background:#E7F0E0; color:#4F7A38; }
.badge--unsolved{ background:#FBEAE3; color:#B0603A; }

/* Icon glyphs so each badge TYPE is recognizable by shape, not just color */
.badge{ display:inline-flex; align-items:center; gap:3px; }
.badge--announce::before{ content:"★"; font-size:10px; }
.badge--pin::before{ content:"■"; font-size:9px; }
.badge--open::before{ content:"○"; font-size:11px; }
.badge--restricted::before{ content:"◐"; font-size:11px; }
.badge--member::before{ content:"●"; font-size:10px; }
.badge--cat::before{ content:"#"; font-weight:800; }
.badge--solved::before{ content:"✓"; font-weight:800; }
.badge--unsolved::before{ content:"?"; font-weight:800; }

/* Unified forum topic row — title / date / views / replies / visibility / category / solved status */
.el-t-row{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:14px 22px; border-bottom:1px solid var(--el-line-soft);
}
.el-t-row:last-child{ border-bottom:none; }
.el-t-row:hover{ background:var(--el-cream-deep); }
.el-t-row-main{ min-width:0; }
.el-t-row-badges{ display:flex; gap:6px; margin-bottom:5px; flex-wrap:wrap; align-items:center; }
.el-t-row-title{
  font-size:14.5px; font-weight:600; color:var(--el-navy);
  display:block;
}
.el-t-row-title svg{ width:12px; height:12px; color:var(--el-ink-faint); flex-shrink:0; }
.el-t-row:hover .el-t-row-title{ text-decoration:underline; text-underline-offset:3px; }
.el-t-row-meta{ font-size:12px; color:var(--el-ink-faint); margin-top:4px; }
.el-t-row-excerpt{ font-size:13px; color:var(--el-ink-faint); margin-top:5px; }
.el-t-row-stats{ display:flex; gap:18px; flex-shrink:0; font-size:11px; color:var(--el-ink-faint); text-align:center; }
.el-t-row-stats div{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.el-t-row-stats strong{ font-size:14px; color:var(--el-navy); font-weight:700; }
@media (max-width:640px){ .el-t-row-stats{ display:none; } }
/* legacy alias kept so existing markup elsewhere still renders correctly */
.el-hub-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:13px 22px; border-bottom:1px solid var(--el-line-soft);
}
.el-hub-row:last-child{ border-bottom:none; }
.el-hub-row:hover{ background:var(--el-cream-deep); }
.el-hub-row-main{ min-width:0; }
.el-hub-row-title{
  font-size:14.5px; font-weight:600; color:var(--el-navy);
  display:flex; align-items:center; gap:6px;
}
.el-hub-row-title svg{ width:12px; height:12px; color:var(--el-ink-faint); flex-shrink:0; }
.el-hub-row-title:hover{ text-decoration:underline; text-underline-offset:3px; }
.el-hub-row-meta{ font-size:12px; color:var(--el-ink-faint); margin-top:4px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.el-hub-row-excerpt{ font-size:13px; color:var(--el-ink-faint); margin-top:5px; }
.el-hub-row-stats{ display:flex; gap:14px; flex-shrink:0; font-size:11.5px; color:var(--el-ink-faint); text-align:center; }
.el-hub-row-stats strong{ display:block; font-size:14px; color:var(--el-navy); font-weight:700; }
@media (max-width:640px){ .el-hub-row-stats{ display:none; } }

/* ---------- Section scaffolding ---------- */
.el-section{ padding:64px 0; }
.el-section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; margin-bottom:30px; flex-wrap:wrap;
}
.el-section-head h2{
  font-family:var(--font-display); font-size:25px; font-weight:600; margin:0;
}
.el-section-head .sub{ color:var(--el-ink-faint); font-size:14.5px; margin-top:4px; }

/* ---------- Category cards ---------- */
.el-categories{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:820px){ .el-categories{ grid-template-columns:1fr; } }
.el-cat-card{
  background:var(--el-paper); border:1px solid var(--el-line-soft);
  border-radius:var(--el-radius-m); padding:20px; display:flex; gap:14px;
  transition:box-shadow .18s, transform .18s;
}
.el-cat-card:hover{ box-shadow:var(--el-shadow-lift); transform:translateY(-2px); }
.el-cat-swatch{
  width:40px; height:40px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:17px;
}
.el-cat-card h4{ font-size:15.5px; margin:0 0 4px; }
.el-cat-card p{ font-size:13.5px; color:var(--el-ink-faint); margin:0 0 8px; }
.el-cat-meta{ font-size:12.5px; color:var(--el-ink-faint); display:flex; gap:10px; }

/* ---------- Section-top catchphrase (フォーラム／コミュニティ／マーケット) ---------- */
.el-catch{
  position:relative; overflow:hidden;
  text-align:center; padding:34px 24px;
  margin-bottom:36px;
  background-image:linear-gradient(100deg, rgba(228,241,238,.85) 0%, rgba(228,241,238,.55) 55%, rgba(228,241,238,.3) 100%), url("hero-bg.png");
  background-size:cover; background-position:center 35%;
  border-bottom:1px solid var(--el-line);
}
.el-catch .ic{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:11px; margin-bottom:10px;
  background:var(--el-teal); color:#fff;
}
.el-catch p{
  position:relative; z-index:1;
  font-family:var(--font-display); font-weight:600; font-style:normal;
  font-size:19px; color:var(--el-navy); line-height:1.75; margin:0;
}

/* ---------- Pinned official box — bulletin-board style, distinct from other cards ---------- */
.el-pinned-box{
  position:relative;
  background:
    repeating-linear-gradient(135deg, rgba(234,170,60,.06) 0 10px, transparent 10px 20px),
    var(--el-paper);
  border:1.5px dashed #E3C68A;
  border-left:5px solid var(--el-mustard);
  border-radius:var(--el-radius-m);
  padding:22px 24px 8px;
}
.el-pinned-head{ display:flex; gap:14px; align-items:flex-start; margin-bottom:14px; }
.el-pinned-box .ic{
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background:var(--el-mustard); color:#fff;
  display:flex; align-items:center; justify-content:center;
  transform:rotate(-8deg);
  box-shadow:0 2px 4px rgba(200,138,36,.35);
}
.el-pinned-head h2{ font-family:var(--font-display); font-size:17px; font-weight:600; margin:6px 0 0; color:var(--el-navy); }
.el-pinned-list{ border-top:1px dashed #E3C68A; }
.el-pinned-item{
  display:flex; align-items:center; gap:10px;
  padding:13px 2px; border-bottom:1px dashed #EAD9B4;
  font-size:14px; font-weight:600; color:var(--el-navy);
}
.el-pinned-item:last-child{ border-bottom:none; }
.el-pinned-item .dot{ width:6px; height:6px; border-radius:50%; background:var(--el-mustard-deep); flex-shrink:0; }
.el-pinned-item .go{ margin-left:auto; color:var(--el-ink-faint); flex-shrink:0; transition:transform .15s; }
.el-pinned-item:hover{ color:var(--el-mustard-deep); }
.el-pinned-item:hover .go{ transform:translateX(3px); color:var(--el-teal-deep); }

/* ---------- Hashtag cloud ---------- */
.el-tag-cloud{ display:flex; flex-wrap:wrap; gap:10px; }
.el-tag-cloud a{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 16px; border-radius:999px; border:1px solid var(--el-line-soft);
  background:var(--el-paper); font-weight:600; font-size:14px; line-height:1.4;
  color:var(--el-navy-soft);
  transition:border-color .15s, color .15s;
}
.el-tag-cloud a:hover{ border-color:var(--el-teal); color:var(--el-teal-deep); }
.el-tag-cloud a .count{ font-size:11.5px; font-weight:500; line-height:1.4; color:var(--el-ink-faint); }

/* ---------- Market page (market.html) ---------- */
.el-market-banner{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  background:linear-gradient(160deg,var(--el-navy) 0%, #1F3155 100%);
  color:var(--el-cream); border-radius:var(--el-radius-l);
  padding:28px 32px; flex-wrap:wrap;
}
.el-market-banner h2{ font-family:var(--font-display); font-size:20px; margin:0 0 8px; }
.el-market-banner p{ color:#C4CCDD; font-size:14px; margin:0; max-width:480px; line-height:1.7; }

.el-market-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-top:8px;
  padding-bottom:16px; border-bottom:1px solid var(--el-line);
}
.el-market-filters{ display:flex; gap:6px; flex-wrap:wrap; }
.el-market-filters button{
  background:none; border:1px solid var(--el-line-soft); border-radius:999px;
  padding:8px 16px; font-size:13.5px; font-weight:600; color:var(--el-navy-soft);
  cursor:pointer; transition:background .15s, color .15s, border-color .15s;
}
.el-market-filters button:hover{ border-color:var(--el-teal); color:var(--el-teal-deep); }
.el-market-filters button.is-active{ background:var(--el-navy); border-color:var(--el-navy); color:#fff; }
.el-market-sort{
  display:flex; align-items:center; gap:6px;
  font-size:13px; color:var(--el-ink-faint); flex-shrink:0;
}
.el-market-sort strong{ color:var(--el-navy); font-weight:700; }

/* ---------- Full listing toolbar (market-list.html / market-official.html) ---------- */
.el-market-toolbar-list{
  display:flex; flex-direction:column; gap:14px;
  padding-bottom:20px; margin-bottom:28px; border-bottom:1px solid var(--el-line);
}
.el-market-search{
  display:flex; align-items:center; gap:8px;
  background:var(--el-paper); border:1px solid var(--el-line);
  border-radius:999px; padding:10px 16px;
  max-width:420px;
}
.el-market-search svg{ width:15px; height:15px; color:var(--el-ink-faint); flex-shrink:0; }
.el-market-search input{
  border:none; outline:none; background:none; flex:1;
  font-family:inherit; font-size:14px; color:var(--el-navy);
}
.el-market-search input::placeholder{ color:var(--el-ink-faint); }
.el-market-toolbar-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
}
.el-market-controls{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.el-market-check{
  display:flex; align-items:center; gap:6px;
  font-size:13.5px; font-weight:600; color:var(--el-navy-soft); cursor:pointer;
}
.el-market-check input{ accent-color:var(--el-teal); width:14px; height:14px; }
.el-market-select{
  display:flex; align-items:center; gap:6px;
  font-size:13.5px; color:var(--el-ink-faint);
}
.el-market-select select{
  border:1px solid var(--el-line); border-radius:999px;
  padding:7px 12px; font-family:inherit; font-size:13.5px; color:var(--el-navy);
  background:var(--el-paper); cursor:pointer;
}
.el-market-count{ font-size:13px; color:var(--el-ink-faint); }

/* ---------- Seller application form (market-apply.html) ---------- */
.el-apply-form{
  background:var(--el-paper); border:1px solid var(--el-line-soft);
  border-radius:var(--el-radius-l); padding:32px;
}
.el-apply-field{ margin-bottom:20px; }
.el-apply-field label{
  display:block; font-size:13.5px; font-weight:700; color:var(--el-navy); margin-bottom:6px;
}
.el-apply-field label .req{ color:var(--el-coral); margin-left:2px; }
.el-apply-field .hint{ font-size:12.5px; color:var(--el-ink-faint); margin-top:5px; }
.el-apply-field input[type="text"],
.el-apply-field input[type="email"],
.el-apply-field select,
.el-apply-field textarea{
  width:100%; border:1px solid var(--el-line); border-radius:var(--el-radius-s);
  padding:11px 14px; font-family:inherit; font-size:14.5px; color:var(--el-navy);
  background:var(--el-cream); box-sizing:border-box;
}
.el-apply-field textarea{ min-height:110px; resize:vertical; }
.el-apply-field input:focus,
.el-apply-field select:focus,
.el-apply-field textarea:focus{ outline:2px solid var(--el-teal); outline-offset:1px; border-color:transparent; }
.el-apply-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .el-apply-row{ grid-template-columns:1fr; } }
.el-apply-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:28px; flex-wrap:wrap; gap:12px; }
.el-apply-foot p{ font-size:12.5px; color:var(--el-ink-faint); margin:0; max-width:360px; }

.el-market-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:900px){ .el-market-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .el-market-grid{ grid-template-columns:1fr; } }
.el-market-card{
  display:flex; flex-direction:column;
  background:var(--el-paper); border:1px solid var(--el-line-soft);
  border-radius:var(--el-radius-l); overflow:hidden;
  transition:box-shadow .18s, transform .18s;
}
.el-market-card:hover{ box-shadow:var(--el-shadow-lift); transform:translateY(-3px); }
.el-market-thumb{
  height:130px; display:flex; align-items:center; justify-content:center;
}
.el-market-body{ padding:16px 18px 18px; display:flex; flex-direction:column; flex:1; }
.el-market-body h3{ font-size:15px; margin:8px 0 4px; color:var(--el-navy); line-height:1.4; }
.el-market-body p{ font-size:13px; color:var(--el-ink-faint); margin:0; line-height:1.65; flex:1; }
.el-market-rating{ display:flex; align-items:center; gap:6px; margin:2px 0 6px; }
.el-market-rating .stars{ font-size:12px; color:var(--el-mustard-deep); letter-spacing:1px; }
.el-market-rating .count{ font-size:11.5px; color:var(--el-ink-faint); }
.el-market-foot{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:14px; padding-top:14px; border-top:1px solid var(--el-line-soft);
}
.el-market-foot strong{ font-size:16px; color:var(--el-navy); font-weight:700; }
.el-market-btns{ display:flex; align-items:center; gap:8px; }
.el-cart-btn{
  width:32px; height:32px; border-radius:8px; flex-shrink:0;
  border:1.5px solid var(--el-line-soft); background:var(--el-paper);
  color:var(--el-navy-soft); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:border-color .15s, color .15s;
}
.el-cart-btn:hover{ border-color:var(--el-teal); color:var(--el-teal-deep); }

/* ---------- Event cards (events.html) ---------- */
.el-event-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
@media (max-width:760px){ .el-event-grid{ grid-template-columns:1fr; } }
.el-event-card{
  display:block;
  background:var(--el-paper); border:1px solid var(--el-line-soft);
  border-radius:var(--el-radius-l); overflow:hidden;
  transition:box-shadow .18s, transform .18s;
}
.el-event-card:hover{ box-shadow:var(--el-shadow-lift); transform:translateY(-3px); }
.el-event-thumb{
  position:relative; height:132px;
  display:flex; align-items:center; justify-content:center;
}
.el-event-date-tag{
  position:absolute; top:12px; left:12px;
  background:rgba(255,255,255,.94); border-radius:10px;
  padding:6px 10px; text-align:center; line-height:1.1;
  display:flex; flex-direction:column; align-items:center;
}
.el-event-date-tag .d{ font-family:var(--font-display); font-size:17px; font-weight:700; color:var(--el-navy); }
.el-event-date-tag .m{ font-size:10px; color:var(--el-ink-faint); letter-spacing:.06em; }
.el-event-body{ padding:18px 20px 20px; }
.el-event-body h3{ font-size:15.5px; margin:8px 0 6px; color:var(--el-navy); }
.el-event-body .meta{ font-size:12.5px; color:var(--el-ink-faint); margin-bottom:6px; }
.el-event-body p{ font-size:13.5px; color:var(--el-navy-soft); margin:0 0 12px; line-height:1.7; }
.el-event-cta{
  display:inline-flex; align-items:center; gap:5px;
  font-size:13.5px; font-weight:700; color:var(--el-teal-deep);
}
.el-event-card:hover .el-event-cta{ text-decoration:underline; text-underline-offset:3px; }
.el-event-grid.is-past .el-event-card{ opacity:.75; }

/* ---------- Topic list (Discourse-style, route-line signature) ---------- */
.el-board{
  background:var(--el-paper); border:1px solid var(--el-line-soft);
  border-radius:var(--el-radius-l); overflow:hidden;
}
.el-board-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 22px; border-bottom:1px solid var(--el-line-soft); gap:12px; flex-wrap:wrap;
}
.el-tabs{ display:flex; gap:4px; flex-wrap:wrap; }
.el-tabs button, .el-tabs a{
  background:none; border:none; padding:7px 13px; border-radius:999px;
  font-size:13.5px; font-weight:600; color:var(--el-ink-faint);
  text-decoration:none; cursor:pointer;
}
.el-tabs a:hover{ background:var(--el-cream-deep); color:var(--el-navy); }
.el-tabs button.is-active, .el-tabs a.is-active{ background:var(--el-navy); color:var(--el-cream); }

.el-topic-row{
  position:relative;
  display:grid;
  grid-template-columns:1fr 92px 92px 130px;
  align-items:center;
  gap:14px;
  padding:16px 22px 16px 30px;
  border-bottom:1px solid var(--el-line-soft);
}
.el-topic-row:last-child{ border-bottom:none; }
.el-topic-row:hover{ background:var(--el-teal-tint); }
/* the "trade route" dotted line + node, the signature motif */
.el-topic-row::before{
  content:""; position:absolute; left:14px; top:0; bottom:0;
  border-left:1px dashed var(--el-line);
}
.el-topic-row::after{
  content:""; position:absolute; left:11px; top:50%; transform:translateY(-50%);
  width:7px; height:7px; border-radius:50%; background:var(--el-line);
}
.el-topic-row.is-pinned::after{ background:var(--el-mustard); }
.el-topic-row.is-announce::after{ background:var(--el-coral); }

.el-topic-main{ min-width:0; }
.el-topic-badges{ display:flex; gap:6px; margin-bottom:4px; }
.badge{
  display:inline-flex; align-items:center; gap:4px;
  font-size:11.5px; font-weight:700; letter-spacing:.03em;
  padding:2px 8px; border-radius:999px;
}
.badge--pin{ background:var(--el-mustard-tint); color:var(--el-mustard-deep); }
.badge--announce{ background:#F7E4DC; color:var(--el-coral); }
.badge--cat{ background:var(--el-teal-tint); color:var(--el-teal-deep); }
.el-topic-title{ font-size:15.5px; font-weight:600; color:var(--el-navy); }
.el-topic-title:hover{ text-decoration:underline; text-underline-offset:3px; }
.el-topic-excerpt{ font-size:13px; color:var(--el-ink-faint); margin-top:3px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.el-topic-meta{ font-size:12px; color:var(--el-ink-faint); margin-top:6px; display:flex; gap:10px; align-items:center; }
.el-avatars{ display:flex; }
.el-avatars .el-avatar{ width:22px; height:22px; font-size:10px; margin-left:-7px; border:2px solid var(--el-paper); }
.el-avatars .el-avatar:first-child{ margin-left:0; }

.el-col{ text-align:center; }
.el-col .num{ font-size:15px; font-weight:700; color:var(--el-navy); }
.el-col .lbl{ font-size:11px; color:var(--el-ink-faint); }
.el-activity{ font-size:12.5px; color:var(--el-ink-faint); text-align:right; }
.el-activity strong{ display:block; color:var(--el-navy-soft); font-size:13px; font-weight:600; }

@media (max-width:760px){
  .el-topic-row{ grid-template-columns:1fr 60px; }
  .el-col:nth-child(3), .el-activity{ display:none; }
}

/* ---------- Topic detail / thread ---------- */
/* ---------- Official notice article (announcement detail — no replies, distinct from a forum thread) ---------- */
.el-notice{
  background:linear-gradient(180deg, #FBF1EA 0%, var(--el-paper) 240px);
  border:1.5px solid #F0D9C8;
  border-radius:var(--el-radius-l);
  padding:32px;
  box-shadow:0 2px 4px rgba(216,120,90,.05), 0 10px 24px rgba(216,120,90,.06);
}
.el-notice-head{ display:flex; gap:16px; margin-bottom:22px; }
.el-notice-icon{
  width:44px; height:44px; border-radius:12px; flex-shrink:0;
  background:var(--el-coral); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.el-notice-head h1{
  font-family:var(--font-display); font-size:clamp(19px,3vw,24px);
  font-weight:600; margin:8px 0 8px; line-height:1.4;
}
.el-notice-meta{ font-size:13px; color:var(--el-ink-faint); }
.el-notice-body{ font-size:15px; color:var(--el-navy-soft); line-height:1.9; }
.el-notice-body p{ margin:0 0 14px; }
.el-notice-fact{
  background:var(--el-paper); border:1px solid var(--el-line-soft);
  border-radius:var(--el-radius-m); padding:16px 20px; margin:18px 0;
}
.el-notice-fact div{ display:flex; gap:14px; font-size:14px; color:var(--el-navy); padding:6px 0; }
.el-notice-fact div + div{ border-top:1px solid var(--el-line-soft); }
.el-notice-fact span{ flex-shrink:0; width:44px; font-size:12.5px; font-weight:700; color:var(--el-ink-faint); }
.el-notice-foot{ display:flex; gap:10px; margin-top:24px; padding-top:20px; border-top:1px solid #F0D9C8; flex-wrap:wrap; }

/* ---------- Thread layout: main column (left) + related-content sidebar (right) ---------- */
.el-thread-layout{
  display:flex; align-items:flex-start; gap:32px;
  padding:0 32px;
}
.el-thread-main{ flex:1; min-width:0; max-width:800px; }
@media (max-width:720px){ .el-thread-layout{ padding:0 18px; } }

.el-post--op{
  background:var(--el-teal-tint);
  border-radius:var(--el-radius-m);
  padding:28px 28px 26px;
  margin:26px 0 8px;
  border-bottom:none !important;
  overflow:hidden;
}
.el-comments-head{
  display:flex; align-items:baseline; gap:8px;
  margin:30px 0 4px; padding-top:22px; border-top:1px solid var(--el-line);
}
.el-comments-head h2{ font-family:var(--font-display); font-size:17px; font-weight:600; margin:0; color:var(--el-navy); }
.el-comments-head .count{ font-size:13px; color:var(--el-ink-faint); }

/* Related-content sidebar (topic detail page) */
.el-thread-side{
  width:360px; flex-shrink:0;
  display:none;
  position:sticky; top:calc(var(--gh-h, 0px) + var(--header-h) + 24px);
  display:flex; flex-direction:column; gap:20px;
}
@media (min-width:1000px){ .el-thread-side{ display:flex; } }
.el-side-panel{
  background:var(--el-paper); border:1px solid var(--el-line-soft);
  border-radius:var(--el-radius-m); padding:16px;
}
.el-side-panel h4{
  font-size:12.5px; font-weight:700; color:var(--el-ink-faint);
  text-transform:uppercase; letter-spacing:.04em; margin:0 0 10px;
}
.el-side-panel-row{
  display:block; padding:9px 0; border-bottom:1px solid var(--el-line-soft);
}
.el-side-panel-row:last-child{ border-bottom:none; padding-bottom:0; }
.el-side-panel-row .badge{ margin-bottom:4px; }
.el-side-panel-row .title{
  display:block; font-size:13.5px; font-weight:600; color:var(--el-navy); line-height:1.5;
}
.el-side-panel-row:hover .title{ color:var(--el-teal-deep); text-decoration:underline; text-underline-offset:2px; }
.el-side-mini-card{
  display:flex; align-items:center; gap:10px;
  padding:9px 0; border-bottom:1px solid var(--el-line-soft);
}
.el-side-mini-card:last-child{ border-bottom:none; padding-bottom:0; }
.el-side-mini-card .ic{
  width:32px; height:32px; border-radius:9px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.el-side-mini-card .txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.el-side-mini-card .txt strong{ font-size:13.5px; font-weight:600; color:var(--el-navy); }
.el-side-mini-card .txt span{ font-size:12px; color:var(--el-ink-faint); }
.el-side-mini-card:hover .txt strong{ color:var(--el-teal-deep); }

.el-breadcrumb{
  display:flex; align-items:center; gap:6px;
  font-size:13.5px; color:var(--el-ink-faint); margin-bottom:16px;
}
.el-breadcrumb a{ color:var(--el-ink-faint); }
.el-breadcrumb a:hover{ color:var(--el-navy); text-decoration:underline; text-underline-offset:2px; }
.el-breadcrumb svg{ width:9px; height:9px; flex-shrink:0; }
.el-breadcrumb span:last-child{ color:var(--el-navy-soft); font-weight:600; }
.el-thread-head{ padding:38px 0 22px; border-bottom:1px solid var(--el-line); }
.el-thread-head .badge{ margin-bottom:12px; }
.el-thread-head h1{
  font-family:var(--font-display); font-size:clamp(21px,3vw,28px);
  font-weight:600; margin:0 0 14px; line-height:1.4;
}
.el-thread-meta{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--el-ink-faint); flex-wrap:wrap; }

.el-post{
  display:grid; grid-template-columns:48px 1fr; gap:16px;
  padding:26px 0; border-bottom:1px solid var(--el-line-soft);
}
.el-post .el-avatar{ width:48px; height:48px; font-size:16px; }
.el-post-head{ display:flex; align-items:baseline; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
.el-post-head .name{ font-weight:700; font-size:14.5px; }
.el-post-dates{ font-size:12px; color:var(--el-ink-faint); margin:-4px 0 12px; }
.el-reply-tag-slot:empty{ display:none; }
.el-reply-tag{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11.5px; color:var(--el-ink-faint);
  margin-bottom:7px;
}
.el-reply-tag svg{ width:12px; height:12px; flex-shrink:0; color:var(--el-ink-faint); }
.el-reply-tag:hover{ color:var(--el-teal-deep); }
.el-reply-tag:hover svg{ color:var(--el-teal-deep); }
.el-reply-tag strong{ font-weight:700; color:var(--el-navy-soft); }
.el-reply-tag:hover strong{ color:var(--el-teal-deep); text-decoration:underline; text-underline-offset:2px; }
.el-post.is-highlighted{ animation:elReplyHighlight 1.6s ease; }
@keyframes elReplyHighlight{
  0%{ background:var(--el-mustard-tint); border-radius:var(--el-radius-s); }
  100%{ background:transparent; }
}
.el-post-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.el-post-tags a{ font-size:12px; color:var(--el-ink-faint); }
.el-post-tags a:hover{ color:var(--el-teal-deep); text-decoration:underline; text-underline-offset:2px; }
.el-post-head .role{
  font-size:11px; font-weight:700; letter-spacing:.03em; padding:2px 8px; border-radius:999px;
  background:var(--el-teal-tint); color:var(--el-teal-deep);
}
.el-post-head .time{ font-size:12.5px; color:var(--el-ink-faint); }
.el-post-body{ font-size:15px; color:var(--el-navy-soft); line-height:1.85; }
.el-post-body p{ margin:0 0 12px; }
.el-post-actions{ display:flex; gap:16px; margin-top:14px; }
.el-post-actions button{
  background:none; border:none; display:flex; align-items:center; gap:5px;
  font-size:13px; color:var(--el-ink-faint); font-weight:600;
}
.el-post-actions button:hover{ color:var(--el-teal-deep); }

.el-reply-box{
  margin-top:30px; background:var(--el-paper); border:1px solid var(--el-line-soft);
  border-radius:var(--el-radius-m); padding:20px;
}
.el-reply-box textarea{
  width:100%; min-height:96px; border:1px solid var(--el-line); border-radius:var(--el-radius-s);
  padding:12px 14px; font-family:inherit; font-size:14.5px; resize:vertical; background:var(--el-cream);
}
.el-reply-box textarea:focus{ outline:2px solid var(--el-teal); outline-offset:1px; border-color:transparent; }
.el-reply-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:12px; }

/* ---------- Groups / community ---------- */
.el-group-hero{
  background:linear-gradient(160deg,var(--el-navy) 0%, #1F3155 100%);
  color:var(--el-cream); border-radius:var(--el-radius-l);
  padding:34px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.el-group-hero h2{ font-family:var(--font-display); font-size:23px; margin:0 0 8px; }
.el-group-hero p{ color:#C4CCDD; font-size:14.5px; margin:0; max-width:480px; }
.el-group-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:28px; }
@media (max-width:900px){ .el-group-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .el-group-grid{ grid-template-columns:1fr; } }
.el-group-card{
  background:var(--el-paper); border:1px solid var(--el-line-soft);
  border-radius:var(--el-radius-m); padding:22px; display:flex; flex-direction:column; gap:12px;
  transition:box-shadow .18s, transform .18s;
}
.el-group-card:hover{ box-shadow:var(--el-shadow-lift); transform:translateY(-2px); }
.el-group-top{ display:flex; align-items:center; gap:12px; }
.el-group-icon{
  width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:19px; flex-shrink:0;
}
.el-group-card h4{ font-size:15.5px; margin:0; }
.el-group-card .visibility{ font-size:12px; color:var(--el-ink-faint); display:flex; align-items:center; gap:4px; }
.el-group-card p.desc{ font-size:13.5px; color:var(--el-ink-faint); margin:0; flex:1; }
.el-group-foot{ display:flex; align-items:center; justify-content:space-between; }
.el-group-members{ display:flex; align-items:center; }
.el-group-members .el-avatar{ width:24px; height:24px; font-size:10px; margin-left:-7px; border:2px solid var(--el-paper); }
.el-group-members .el-avatar:first-child{ margin-left:0; }
.el-group-members .more{ font-size:12px; color:var(--el-ink-faint); margin-left:8px; }

/* Group card status — deliberately not a badge/pill, to stay visually distinct from forum chips */
.el-group-status{
  display:inline-flex; align-items:center; gap:5px;
  font-size:12.5px; font-weight:700;
}
.el-group-status svg{ flex-shrink:0; }
.el-group-status.is-joined{ color:var(--el-teal-deep); }
.el-group-status.is-pending{ color:var(--el-mustard-deep); }

/* ---------- Announcements ---------- */
.el-announce-hero{ text-align:center; padding:20px 0 6px; }
.el-announce-hero .eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700;
  letter-spacing:.12em; color:var(--el-coral);
}
.el-announce-list{ display:flex; flex-direction:column; gap:16px; }
.el-announce-card{
  display:grid; grid-template-columns:76px 1fr; gap:20px;
  background:var(--el-paper); border:1px solid var(--el-line-soft);
  border-radius:var(--el-radius-m); padding:22px 24px;
  transition:box-shadow .18s, transform .18s;
}
.el-announce-card:hover{ box-shadow:var(--el-shadow-lift); transform:translateY(-2px); }
.el-announce-date{ text-align:center; }
.el-announce-date .d{ font-family:var(--font-display); font-size:27px; font-weight:600; color:var(--el-navy); line-height:1; }
.el-announce-date .m{ font-size:12px; color:var(--el-ink-faint); letter-spacing:.06em; margin-top:2px; }
.el-announce-card h4{ font-size:16px; margin:0 0 6px; }
.el-announce-card p{ font-size:14px; color:var(--el-ink-faint); margin:0; }
.el-announce-card .tag{ margin-bottom:8px; }
@media (max-width:600px){ .el-announce-card{ grid-template-columns:1fr; } .el-announce-date{ display:flex; gap:8px; align-items:baseline; justify-content:flex-start; } }

/* ---------- Footer ---------- */
.el-footer{
  border-top:1px solid var(--el-line);
  padding:44px 0 30px; margin-top:60px;
}
.el-footer-grid{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.el-footer .el-logo{ margin-bottom:10px; }
.el-footer p.tag{ font-size:13.5px; color:var(--el-ink-faint); max-width:280px; }
.el-footer-cols{ display:flex; gap:56px; flex-wrap:wrap; }
.el-footer-cols h6{ font-size:12.5px; letter-spacing:.08em; color:var(--el-ink-faint); text-transform:uppercase; margin:0 0 10px; }
.el-footer-cols a{ display:block; font-size:14px; color:var(--el-navy-soft); padding:4px 0; }
.el-footer-cols a:hover{ color:var(--el-teal-deep); }
.el-footer-bottom{
  margin-top:36px; padding-top:20px; border-top:1px solid var(--el-line-soft);
  font-size:12.5px; color:var(--el-ink-faint); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
}

/* ---------- Mobile header ---------- */
@media (max-width:900px){
  .el-search{ display:none; }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}
.el-fade-up{ animation:elFadeUp .6s ease both; }
@keyframes elFadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }

/* ---------- SHiFT会員とは modal ---------- */
.el-modal{
  position:fixed; inset:0; z-index:200;
  display:none; align-items:center; justify-content:center;
  padding:24px;
}
.el-modal.is-open{ display:flex; }
.el-modal-backdrop{
  position:absolute; inset:0;
  background:rgba(22,35,63,.45);
  backdrop-filter:blur(2px);
}
.el-modal-panel{
  position:relative; z-index:1;
  background:var(--el-paper); border-radius:var(--el-radius-l);
  max-width:440px; width:100%;
  padding:32px 28px 28px;
  box-shadow:0 20px 60px rgba(22,35,63,.25);
}
.el-modal-close{
  position:absolute; top:16px; right:16px;
  width:30px; height:30px; border-radius:50%; border:none;
  background:var(--el-cream-deep); color:var(--el-navy-soft);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.el-modal-close:hover{ background:var(--el-line-soft); color:var(--el-navy); }
.el-modal-panel h2{
  font-family:var(--font-display); font-size:20px; font-weight:600;
  margin:0 0 12px; color:var(--el-navy);
}
.el-modal-lead{ font-size:14px; color:var(--el-navy-soft); line-height:1.8; margin:0 0 20px; }
.el-modal-services{ display:flex; flex-direction:column; gap:8px; }
.el-modal-service{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:var(--el-radius-m);
  border:1px solid var(--el-line-soft);
  transition:border-color .15s, box-shadow .15s;
}
.el-modal-service:hover{ border-color:transparent; box-shadow:var(--el-shadow); }
.el-modal-service .ic{
  width:36px; height:36px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.el-modal-service .txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.el-modal-service .txt strong{ font-size:14.5px; color:var(--el-navy); }
.el-modal-service .txt span{ font-size:12.5px; color:var(--el-ink-faint); }

/* ---------- Mypage dashboard panels ---------- */
.el-panel-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
@media (max-width:640px){ .el-panel-grid{ grid-template-columns:1fr; } }
.el-panel{
  background:var(--el-paper); border:1px solid var(--el-line-soft);
  border-radius:var(--el-radius-l); padding:20px 22px;
}
.el-panel.el-panel-full{ grid-column:1 / -1; }
.el-panel-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.el-panel-head .ic{
  width:36px; height:36px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.el-panel-head h3{ font-size:15px; margin:0; color:var(--el-navy); }
.el-panel-head .sub{ font-size:12px; color:var(--el-ink-faint); margin-top:2px; }
.el-panel-rows{ display:flex; flex-direction:column; }
.el-panel-row{
  display:flex; align-items:center; gap:8px;
  padding:9px 2px; border-bottom:1px solid var(--el-line-soft);
  font-size:13.5px; color:var(--el-navy-soft);
}
.el-panel-row:last-child{ border-bottom:none; }
.el-panel-row:hover{ color:var(--el-teal-deep); }
.el-panel-row .val{ margin-left:auto; color:var(--el-navy); font-weight:700; font-size:14px; flex-shrink:0; }
.el-panel-row .val .tiny{ font-weight:500; color:var(--el-ink-faint); font-size:11.5px; margin-left:4px; }
.el-panel-row svg.go{ flex-shrink:0; color:var(--el-ink-faint); width:12px; height:12px; }

.el-badge-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
@media (max-width:480px){ .el-badge-grid{ grid-template-columns:repeat(3,1fr); } }
.el-badge-item{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
.el-badge-item .ic{
  width:46px; height:46px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.el-badge-item span{ font-size:11px; color:var(--el-navy-soft); line-height:1.4; }

.el-follow-row{ display:flex; align-items:center; gap:20px; margin-bottom:14px; }
.el-follow-row .el-avatars .el-avatar{ width:30px; height:30px; font-size:12px; margin-left:-8px; border:2px solid var(--el-paper); }
.el-follow-row .el-avatars .el-avatar:first-child{ margin-left:0; }
.el-follow-stats{ display:flex; gap:24px; }
.el-follow-stats div{ text-align:left; }
.el-follow-stats strong{ display:block; font-size:19px; color:var(--el-navy); font-weight:700; }
.el-follow-stats span{ font-size:12px; color:var(--el-ink-faint); }

.el-dm-list{ display:flex; flex-direction:column; }
.el-dm-row{
  display:flex; align-items:center; gap:12px;
  padding:11px 2px; border-bottom:1px solid var(--el-line-soft);
}
.el-dm-row:last-child{ border-bottom:none; }
.el-dm-row .el-avatar{ width:36px; height:36px; font-size:13px; flex-shrink:0; }
.el-dm-row-main{ flex:1; min-width:0; }
.el-dm-row-main .name{ font-size:13.5px; font-weight:700; color:var(--el-navy); display:flex; align-items:center; gap:6px; }
.el-dm-row-main .snippet{ font-size:12.5px; color:var(--el-ink-faint); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.el-dm-row .time{ font-size:11.5px; color:var(--el-ink-faint); flex-shrink:0; }
.el-dm-unread{ width:7px; height:7px; border-radius:50%; background:var(--el-coral); flex-shrink:0; }

/* ---------- Product detail modal (market pages) ---------- */
.el-product-modal .el-modal-panel{ max-width:480px; padding:0; overflow:hidden; }
.el-pm-banner{
  position:relative;
  height:120px;
  display:flex; align-items:center; justify-content:center;
}
.el-pm-body{ padding:26px 28px 28px; }
.el-product-modal .el-modal-close{
  background:rgba(255,255,255,.85); backdrop-filter:blur(2px);
  z-index:2;
}
.el-product-modal .el-modal-close:hover{ background:#fff; }
.el-product-modal-meta{ font-size:13.5px; color:var(--el-ink-faint); margin:12px 0 4px; }
.el-product-modal-price{ font-size:23px; font-weight:700; color:var(--el-navy); margin:2px 0 18px; }
.el-product-modal-section{ margin-bottom:16px; }
.el-product-modal-section h4{
  font-size:12px; font-weight:700; color:var(--el-ink-faint);
  text-transform:uppercase; letter-spacing:.05em; margin:0 0 6px;
}
.el-product-modal-section p{ font-size:14px; color:var(--el-navy-soft); line-height:1.8; margin:0; }
.el-pm-features{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:420px){ .el-pm-features{ grid-template-columns:1fr; } }
.el-pm-feature{
  display:flex; gap:10px; align-items:flex-start;
  padding:12px; background:var(--el-cream); border-radius:var(--el-radius-s);
}
.el-pm-feature .ic{
  width:28px; height:28px; border-radius:8px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--el-teal-tint); color:var(--el-teal-deep);
}
.el-pm-feature strong{ display:block; font-size:12.5px; color:var(--el-navy); margin-bottom:2px; }
.el-pm-feature span{ font-size:11.5px; color:var(--el-ink-faint); line-height:1.5; }
.el-product-modal-foot{
  display:flex; gap:10px; margin-top:22px; padding-top:18px;
  border-top:1px solid var(--el-line-soft);
}
.el-product-modal-foot .el-btn{ flex:1; }
.el-market-card{ cursor:pointer; }

/* ---------- Header cart icon + badge (market pages) ---------- */
.el-header-cart{
  position:relative; flex-shrink:0;
  width:34px; height:34px; border-radius:50%; border:none;
  background:rgba(255,255,255,.14); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .15s;
}
.el-header-cart:hover{ background:rgba(255,255,255,.22); }
.el-header-cart svg{ width:16px; height:16px; }
.el-header-cart .count{
  position:absolute; top:-3px; right:-3px;
  min-width:16px; height:16px; padding:0 3px; border-radius:999px;
  background:var(--el-mustard); color:var(--el-navy);
  font-size:10.5px; font-weight:800; line-height:16px; text-align:center;
  display:none;
}
.el-header-cart .count.is-visible{ display:block; }

/* ---------- Ad banner (rotates between partner services) ---------- */
.el-ad-banner{
  position:relative;
  display:flex; align-items:center; gap:16px;
  background:var(--el-paper); border:1px solid var(--el-line-soft);
  border-radius:var(--el-radius-m); padding:18px 22px;
  margin-top:28px;
}
.el-ad-tag{
  position:absolute; top:8px; right:10px;
  font-size:10px; font-weight:700; letter-spacing:.06em;
  color:var(--el-ink-faint); opacity:.7;
}
.el-ad-icon{
  width:44px; height:44px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.el-ad-body{ flex:1; min-width:0; }
.el-ad-body strong{ display:block; font-size:14.5px; color:var(--el-navy); }
.el-ad-body span{ display:block; font-size:13px; color:var(--el-ink-faint); margin-top:2px; }
.el-ad-banner .el-btn{ flex-shrink:0; }
@media (max-width:560px){
  .el-ad-banner{ flex-wrap:wrap; }
  .el-ad-banner .el-btn{ width:100%; }
}

/* ---------- Reply context indicator (誰に返信しているか) ---------- */
.el-reply-context{
  display:none; align-items:center; gap:8px;
  background:var(--el-teal-tint); border-radius:var(--el-radius-s);
  padding:8px 12px; margin-bottom:12px;
  font-size:13px;
}
.el-reply-context.is-visible{ display:flex; }
.el-reply-context a{ color:var(--el-teal-deep); font-weight:700; flex:1; min-width:0; }
.el-reply-context a:hover{ text-decoration:underline; }
.el-reply-context button{
  background:none; border:none; color:var(--el-ink-faint); cursor:pointer;
  width:18px; height:18px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
}
.el-reply-context button:hover{ color:var(--el-navy); }

.el-header-bell{
  position:relative; flex-shrink:0;
  width:34px; height:34px; border-radius:50%; border:none;
  background:rgba(255,255,255,.14); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .15s;
}
.el-header-bell:hover{ background:rgba(255,255,255,.22); }
.el-header-bell svg{ width:16px; height:16px; }
.el-header-bell .count{
  position:absolute; top:-3px; right:-3px;
  min-width:16px; height:16px; padding:0 3px; border-radius:999px;
  background:var(--el-coral); color:#fff;
  font-size:10.5px; font-weight:800; line-height:16px; text-align:center;
}

/* ---------- Toast (added to cart) ---------- */
.el-toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(12px);
  background:var(--el-navy); color:#fff;
  padding:12px 20px; border-radius:999px;
  font-size:13.5px; font-weight:600;
  display:flex; align-items:center; gap:8px;
  box-shadow:0 10px 30px rgba(22,35,63,.3);
  opacity:0; pointer-events:none; z-index:300;
  transition:opacity .2s ease, transform .2s ease;
}
.el-toast.is-visible{ opacity:1; transform:translateX(-50%) translateY(0); }
.el-toast svg{ width:14px; height:14px; color:var(--el-teal); flex-shrink:0; }
.el-modal-service .go{ flex-shrink:0; color:var(--el-ink-faint); }


/* ===== 2026-08-10 page architecture / sidebar refinements ===== */
.el-side-cat-body > a{
  display:block; padding:6px 10px; border-radius:7px;
  font-size:12.5px; color:#8D97B5;
}
.el-side-cat-body > a:hover{ background:rgba(255,255,255,.08); color:#fff; }
.el-side-cat-body > a.el-side-more{
  margin-top:3px; color:#D7DDF0; font-weight:700;
  border-top:1px solid rgba(255,255,255,.10); border-radius:0;
  padding-top:8px;
}
.el-side-more span{ float:right; color:var(--el-mustard); }
.el-list-toolbar{
  display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:14px;
  padding:16px; margin:0 0 16px; background:#fff; border:1px solid var(--el-line-soft);
  border-radius:var(--el-radius-m); box-shadow:var(--el-shadow);
}
.el-filter-group{ display:flex; flex-wrap:wrap; gap:10px; align-items:end; }
.el-field{ display:grid; gap:5px; min-width:160px; }
.el-field label{ font-size:11px; font-weight:700; color:var(--el-ink-faint); letter-spacing:.04em; }
.el-field select{
  min-height:40px; padding:8px 34px 8px 11px; border:1px solid var(--el-line); border-radius:9px;
  background:#fff; color:var(--el-navy); font:inherit; font-size:13px;
}
.el-result-count{ font-size:12.5px; color:var(--el-ink-faint); white-space:nowrap; }
.el-pagination{ display:flex; justify-content:center; gap:6px; margin:24px 0 8px; }
.el-pagination button,.el-pagination span{
  min-width:36px; height:36px; display:grid; place-items:center; border:1px solid var(--el-line);
  border-radius:9px; background:#fff; color:var(--el-navy); font-size:13px;
}
.el-pagination button.is-active{ background:var(--el-teal); color:#fff; border-color:var(--el-teal); font-weight:700; }
.el-pagination button:disabled{ opacity:.4; cursor:default; }
.el-directory-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.el-directory-card{
  display:flex; align-items:center; gap:14px; min-height:88px; padding:18px; border:1px solid var(--el-line-soft);
  border-radius:var(--el-radius-m); background:#fff; box-shadow:var(--el-shadow); transition:transform .15s, box-shadow .15s;
}
.el-directory-card:hover{ transform:translateY(-2px); box-shadow:var(--el-shadow-lift); }
.el-directory-card .mark{ width:38px; height:38px; display:grid; place-items:center; border-radius:11px; background:var(--el-teal-tint); color:var(--el-teal-deep); font-weight:800; flex:0 0 auto; }
.el-directory-card h3{ margin:0 0 3px; font-size:15px; }
.el-directory-card p{ margin:0; color:var(--el-ink-faint); font-size:12px; line-height:1.5; }
.el-directory-card .go{ margin-left:auto; color:var(--el-mustard-deep); font-weight:800; }
.el-all-groups{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.el-all-groups .el-group-card{ height:100%; }
@media(max-width:760px){
  .el-directory-grid,.el-all-groups{ grid-template-columns:1fr; }
  .el-list-toolbar{ align-items:stretch; }
  .el-filter-group,.el-field{ width:100%; }
}


/* ---------- Compact list filters (forum / community) ---------- */
.el-list-tools-compact{
  display:flex;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:8px 12px;
  padding:2px 0 12px;
  margin-bottom:4px;
  border-bottom:1px solid var(--el-line-soft);
}
.el-list-tools-label{
  align-self:center;
  color:var(--el-ink-faint);
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
}
.el-list-tools-compact label{
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--el-navy-soft);
  font-size:12px;
  font-weight:600;
}
.el-list-tools-compact select{
  min-width:118px;
  height:34px;
  padding:0 30px 0 10px;
  border:1px solid var(--el-line);
  border-radius:8px;
  background:rgba(255,255,255,.62);
  color:var(--el-navy);
  font:inherit;
  font-size:13px;
}
.el-result-count--plain{
  margin-left:auto;
  align-self:center;
  padding:0;
  border:0;
  background:none;
  color:var(--el-ink-faint);
  font-size:12px;
}
@media (max-width:720px){
  .el-list-tools-compact{align-items:stretch;}
  .el-list-tools-compact label{width:100%;justify-content:space-between;}
  .el-list-tools-compact select{min-width:56%;}
  .el-result-count--plain{margin-left:0;}
}


/* ===== 2026-08-10: quieter filters / collapsible guide / page breadcrumbs ===== */
.el-list-tools-compact{
  padding:0 0 10px;
  margin:0 0 10px;
  border-bottom:0;
  gap:8px 18px;
}
.el-list-tools-compact label{
  color:var(--el-ink-faint);
  font-size:11.5px;
  font-weight:600;
}
.el-list-tools-compact select{
  min-width:110px;
  height:32px;
  padding:0 25px 0 6px;
  border:0;
  border-bottom:1px solid var(--el-line);
  border-radius:0;
  background:transparent;
  color:var(--el-navy-soft);
  font-size:12.5px;
}
.el-list-tools-compact select:hover,
.el-list-tools-compact select:focus{
  border-bottom-color:var(--el-teal);
}
.el-page-breadcrumb{
  margin:14px 0 18px;
  font-size:12.5px;
}
.el-pinned-box > summary{
  list-style:none;
  cursor:pointer;
  user-select:none;
}
.el-pinned-box > summary::-webkit-details-marker{ display:none; }
.el-pinned-box .el-pinned-head{
  margin-bottom:0;
  padding-bottom:14px;
}
.el-pinned-box[open] .el-pinned-head{ margin-bottom:0; }
.el-pinned-chev{
  width:17px;
  height:17px;
  margin:8px 0 0 auto;
  color:var(--el-ink-faint);
  flex-shrink:0;
  transition:transform .18s ease;
}
.el-pinned-box[open] .el-pinned-chev{ transform:rotate(90deg); }
.el-pinned-box:not([open]){
  padding-bottom:8px;
}
.el-pinned-box:not([open]) .el-pinned-head{ padding-bottom:14px; }
.el-pinned-box[open] .el-pinned-list{ margin-top:0; }


/* ---------- Forum: new topic composer ---------- */
.el-compose-section{ padding-bottom:64px; }
.el-compose-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
  margin:18px 0 28px;
}
.el-compose-kicker{
  display:block; margin-bottom:5px; color:var(--el-teal); font:600 11px/1 var(--font-mono);
  letter-spacing:.12em;
}
.el-compose-head h1{
  margin:0 0 8px; font-family:var(--font-display); font-size:32px; line-height:1.35;
  letter-spacing:.02em;
}
.el-compose-head p{ margin:0; color:var(--el-ink-faint); font-size:14px; }
.el-compose-close{
  display:grid; place-items:center; width:38px; height:38px; flex:none; border:1px solid var(--el-line);
  border-radius:50%; color:var(--el-navy-soft); background:var(--el-paper); font-size:24px; line-height:1;
}
.el-compose-form{
  display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:24px; align-items:start;
}
.el-compose-card{
  background:var(--el-paper); border:1px solid var(--el-line-soft); border-radius:var(--el-radius-l);
  padding:32px; box-shadow:var(--el-shadow);
}
.el-form-block{ padding:0 0 28px; margin:0 0 28px; border-bottom:1px solid var(--el-line-soft); }
.el-form-block:last-child,.el-form-block--compact{ border-bottom:0; margin-bottom:0; padding-bottom:0; }
.el-form-label-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px;
}
.el-form-label-row label{ font-weight:700; font-size:14px; }
.el-form-label-row .required{
  display:inline-block; margin-left:5px; padding:1px 6px; border-radius:999px;
  color:var(--el-coral); background:#FBEDE8; font-size:10px; vertical-align:2px;
}
.el-form-label-row .optional{ margin-left:4px; color:var(--el-ink-faint); font-size:11px; font-weight:500; }
.el-form-hint,.el-char-count{ color:var(--el-ink-faint); font-size:12px; }
.el-form-input,.el-form-select{
  width:100%; min-height:48px; border:1px solid var(--el-line); border-radius:10px;
  padding:11px 14px; background:#fff; color:var(--el-navy); font:500 14px/1.5 var(--font-body);
  outline:none; transition:border-color .15s, box-shadow .15s;
}
.el-form-input:focus,.el-form-select:focus{ border-color:var(--el-teal); box-shadow:0 0 0 3px rgba(47,143,130,.09); }
.el-form-input--title{ font-size:16px; font-weight:600; }
.el-rich-editor{ border:1px solid var(--el-line); border-radius:12px; background:#fff; overflow:hidden; }
.el-rich-editor:focus-within{ border-color:var(--el-teal); box-shadow:0 0 0 3px rgba(47,143,130,.09); }
.el-editor-toolbar{
  display:flex; align-items:center; gap:3px; padding:7px 9px; border-bottom:1px solid var(--el-line-soft);
  background:#FAF8F2;
}
.el-editor-toolbar button{
  display:grid; place-items:center; width:32px; height:30px; padding:0; border:0; border-radius:6px;
  background:transparent; color:var(--el-navy-soft); font-size:14px;
}
.el-editor-toolbar button:hover{ background:var(--el-teal-tint); color:var(--el-teal-deep); }
.el-editor-toolbar svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; }
.el-editor-toolbar .sep{ width:1px; height:20px; margin:0 4px; background:var(--el-line); }
.el-editor-area{
  min-height:270px; padding:18px; outline:none; color:var(--el-navy); font-size:14px; line-height:1.9;
}
.el-editor-area:empty::before{ content:attr(data-placeholder); color:#A2A9B7; pointer-events:none; }
.el-editor-area blockquote{
  margin:12px 0; padding:8px 14px; border-left:3px solid var(--el-mustard); background:var(--el-mustard-tint);
}
.el-editor-area.is-error{ box-shadow:inset 0 0 0 1px var(--el-coral); }
.el-tag-picker{ display:flex; flex-wrap:wrap; gap:8px; }
.el-tag-picker label{ cursor:pointer; }
.el-tag-picker input{ position:absolute; opacity:0; pointer-events:none; }
.el-tag-picker span{
  display:inline-flex; align-items:center; min-height:34px; padding:5px 11px; border:1px solid var(--el-line);
  border-radius:999px; background:#fff; color:var(--el-navy-soft); font-size:12px; font-weight:600;
}
.el-tag-picker input:checked + span{
  border-color:rgba(47,143,130,.35); background:var(--el-teal-tint); color:var(--el-teal-deep);
}
.el-custom-tag{ display:flex; align-items:center; gap:7px; margin-top:12px; max-width:350px; }
.el-custom-tag > span{ color:var(--el-teal); font-weight:700; }
.el-custom-tag input{
  flex:1; height:36px; border:0; border-bottom:1px solid var(--el-line); background:transparent; outline:none;
}
.el-custom-tag button{
  border:0; background:none; color:var(--el-teal-deep); font-weight:700; font-size:12px;
}
.el-visibility-options{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.el-visibility-option{
  position:relative; display:flex; gap:9px; padding:14px; border:1px solid var(--el-line);
  border-radius:10px; cursor:pointer; background:#fff;
}
.el-visibility-option input{ position:absolute; opacity:0; }
.el-visibility-option .radio-ui{
  width:16px; height:16px; margin-top:2px; flex:none; border:1px solid #9CA6B8; border-radius:50%;
}
.el-visibility-option input:checked ~ .radio-ui{
  border:5px solid var(--el-teal);
}
.el-visibility-option:has(input:checked){
  border-color:rgba(47,143,130,.45); background:var(--el-teal-tint);
}
.el-visibility-option strong{ display:block; font-size:13px; }
.el-visibility-option small{ display:block; margin-top:3px; color:var(--el-ink-faint); font-size:10px; line-height:1.45; }
.el-file-drop{
  display:flex; align-items:center; justify-content:center; gap:10px; min-height:72px; padding:16px;
  border:1px dashed #CFC6B3; border-radius:10px; background:#FCFAF5; cursor:pointer; color:var(--el-navy-soft);
  font-size:12px;
}
.el-file-drop input{ display:none; }
.el-file-drop svg{ width:21px; height:21px; fill:none; stroke:var(--el-teal); stroke-width:1.7; }
.el-file-drop strong{ color:var(--el-teal-deep); }
.el-file-names{ margin-top:7px; color:var(--el-ink-faint); font-size:11px; }
.el-notify-check{ display:flex; align-items:center; gap:9px; font-size:13px; cursor:pointer; }
.el-notify-check input{ accent-color:var(--el-teal); }
.el-compose-side{ position:sticky; top:calc(var(--gh-h, 0px) + var(--header-h) + 20px); }
.el-compose-help{
  padding:20px; border:1px solid var(--el-line-soft); border-radius:var(--el-radius-m); background:rgba(255,255,255,.58);
}
.el-compose-help h3{ margin:0 0 12px; font-size:14px; }
.el-compose-help ul{ display:grid; gap:8px; }
.el-compose-help li{ position:relative; padding-left:17px; color:var(--el-navy-soft); font-size:11px; line-height:1.6; }
.el-compose-help li::before{
  content:"✓"; position:absolute; left:0; top:0; color:var(--el-teal); font-weight:800;
}
.el-compose-help a{ display:inline-block; margin-top:14px; color:var(--el-teal-deep); font-size:11px; font-weight:700; }
.el-compose-actions{
  grid-column:1 / -1; display:flex; justify-content:flex-end; align-items:center; gap:10px; margin-top:4px;
}
.el-compose-actions .el-btn{ min-width:112px; }
.el-submit-topic{ min-width:150px!important; }
.el-preview-dialog{
  width:min(780px,calc(100vw - 32px)); max-height:82vh; padding:0; border:0; border-radius:18px;
  box-shadow:0 24px 80px rgba(22,35,63,.25); color:var(--el-navy);
}
.el-preview-dialog::backdrop{ background:rgba(22,35,63,.42); backdrop-filter:blur(2px); }
.el-preview-dialog-inner{ padding:28px; }
.el-preview-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.el-preview-head span{ color:var(--el-teal); font:600 10px/1 var(--font-mono); letter-spacing:.12em; }
.el-preview-head h2{ margin:5px 0 0; font-family:var(--font-display); }
.el-preview-head button{ border:0; background:none; font-size:26px; color:var(--el-ink-faint); }
.el-preview-meta{ margin:18px 0; padding-bottom:14px; border-bottom:1px solid var(--el-line-soft); color:var(--el-ink-faint); font-size:12px; }
.el-preview-body{ font-size:14px; line-height:1.9; }
@media(max-width:900px){
  .el-compose-form{ grid-template-columns:1fr; }
  .el-compose-side{ position:static; }
  .el-visibility-options{ grid-template-columns:1fr; }
}
@media(max-width:640px){
  .el-compose-card{ padding:22px 18px; }
  .el-compose-head h1{ font-size:25px; }
  .el-form-label-row{ align-items:flex-start; flex-direction:column; gap:4px; }
  .el-compose-actions{ flex-wrap:wrap; }
  .el-compose-actions .el-btn{ flex:1; }
}


/* ===== 2026-08-10: unified compact filter dropdowns ===== */
.el-filter-menu{
  position:relative;
  min-width:290px;
}
.el-filter-menu > summary{
  position:relative;
  display:flex;
  align-items:center;
  gap:18px;
  min-width:290px;
  height:32px;
  padding:0 30px 0 0;
  border-bottom:1px solid var(--el-line);
  color:var(--el-ink-faint);
  font-size:11.5px;
  font-weight:600;
  cursor:pointer;
  list-style:none;
  white-space:nowrap;
}
.el-filter-menu > summary::-webkit-details-marker{display:none;}
.el-filter-menu > summary .el-filter-summary-value{
  flex:1;
  color:var(--el-navy-soft);
  font-size:12.5px;
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
}
.el-filter-menu > summary::after{
  content:"";
  position:absolute;
  right:8px;
  top:50%;
  width:6px;
  height:6px;
  border-right:1.8px solid var(--el-navy-soft);
  border-bottom:1.8px solid var(--el-navy-soft);
  transform:translateY(-65%) rotate(45deg);
  transition:transform .15s ease;
}
.el-filter-menu[open] > summary::after{
  transform:translateY(-30%) rotate(225deg);
}
.el-filter-menu > summary:hover,
.el-filter-menu[open] > summary{
  border-bottom-color:var(--el-teal);
}
.el-filter-popover{
  position:absolute;
  z-index:40;
  top:calc(100% + 8px);
  left:0;
  width:330px;
  max-height:390px;
  overflow:auto;
  padding:10px 14px;
  border:1px solid var(--el-line-soft);
  border-radius:12px;
  background:var(--el-paper);
  box-shadow:0 12px 30px rgba(26,45,76,.12);
}
.el-filter-popover label{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:100%!important;
  gap:12px!important;
  padding:10px 2px;
  color:var(--el-navy-soft)!important;
  font-size:13px!important;
  font-weight:500!important;
  cursor:pointer;
}
.el-filter-popover input[type="checkbox"]{
  width:16px;
  height:16px;
  accent-color:var(--el-teal-deep);
  flex:0 0 auto;
}
.el-filter-clear{
  width:100%;
  margin-top:5px;
  padding:10px 2px 4px;
  border:0;
  border-top:1px solid var(--el-line-soft);
  background:transparent;
  color:var(--el-ink-faint);
  text-align:left;
  font:500 12px var(--font-body);
  cursor:pointer;
}
@media(max-width:720px){
  .el-filter-menu,
  .el-filter-menu > summary{width:100%;min-width:0;}
  .el-filter-popover{width:min(330px,calc(100vw - 48px));}
}

/* Common bottom advertising placement */
.el-page-bottom-ad{
  margin-top:44px;
  margin-bottom:10px;
}


/* ===== Rich editor v2 ===== */
.el-rich-editor{position:relative;overflow:visible;}
.el-editor-toolbar{flex-wrap:wrap;gap:4px;position:relative;}
.el-editor-select{height:30px;max-width:105px;border:0;border-radius:6px;background:transparent;color:var(--el-navy-soft);font:600 11px var(--font-body);padding:0 5px;outline:none;}
.el-editor-select:hover,.el-editor-select:focus{background:var(--el-teal-tint);}
.el-editor-color{position:relative;display:grid;place-items:center;width:32px;height:30px;border-radius:6px;color:var(--el-navy-soft);font:700 14px var(--font-body);cursor:pointer;overflow:hidden;}
.el-editor-color:hover{background:var(--el-teal-tint);}
.el-editor-color input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;}
.el-editor-color--bg span{font-size:13px;color:var(--el-mustard);}
.el-editor-area ul{list-style:disc;padding-left:24px;margin:8px 0;}
.el-editor-area ol{list-style:decimal;padding-left:24px;margin:8px 0;}
.el-editor-area li{margin:3px 0;}
.el-editor-area pre{margin:12px 0;padding:14px 16px;border-radius:9px;background:#17233b;color:#f7f8fb;overflow:auto;font:500 12px/1.7 var(--font-mono);white-space:pre-wrap;}
.el-editor-area hr{border:0;border-top:1px solid var(--el-line);margin:20px 0;}
.el-editor-area a{color:var(--el-teal-deep);text-decoration:underline;text-underline-offset:2px;}
.el-editor-image{display:block;max-width:100%;height:auto;margin:14px 0;border-radius:10px;border:1px solid var(--el-line-soft);}
.el-link-popover{position:absolute;z-index:70;width:330px;display:flex;align-items:center;gap:6px;padding:8px;border:1px solid var(--el-line);border-radius:9px;background:#fff;box-shadow:0 10px 28px rgba(22,35,63,.15);}
.el-link-popover[hidden]{display:none!important;}
.el-link-popover.is-centered{left:50%!important;top:52px!important;transform:translateX(-50%);}
.el-link-popover input{min-width:0;flex:1;height:34px;border:1px solid var(--el-line);border-radius:6px;padding:0 9px;font:500 12px var(--font-body);outline:none;}
.el-link-popover input:focus{border-color:var(--el-teal);}
.el-link-popover button{height:34px;border:0;border-radius:6px;padding:0 9px;background:var(--el-teal);color:#fff;font:700 11px var(--font-body);white-space:nowrap;}
.el-link-popover #removeLinkBtn{background:#f2eee5;color:var(--el-navy-soft);}


/* ===== New topic page refinements ===== */
.el-compose-head{ margin-bottom:24px; }
.el-compose-head > div{ max-width:760px; }

.el-rich-editor{
  position:relative;
  border:1px solid var(--el-line);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  box-shadow:none;
}
.el-rich-editor:focus-within{
  border-color:var(--el-teal);
  box-shadow:0 0 0 2px rgba(47,143,130,.10);
}
.el-editor-toolbar{
  margin:0;
  border-radius:0;
}

.el-editor-area blockquote{
  margin:12px 0;
  padding:10px 16px;
  border-left:3px solid var(--el-mustard);
  background:var(--el-mustard-tint);
}
.el-editor-area blockquote > div:empty,
.el-editor-area blockquote > p:empty{ min-height:1.9em; }

.el-notify-check input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  width:18px;
  height:18px;
  margin:0;
  border:0;
  background:transparent;
  position:relative;
  flex:none;
}
.el-notify-check input[type="checkbox"]::before{
  content:"✓";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#A9B0BD;
  font-size:16px;
  font-weight:800;
  line-height:1;
}
.el-notify-check input[type="checkbox"]:checked::before{
  color:var(--el-teal);
}

.el-compose-display-ad{
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;
  aspect-ratio:1/1;
  margin-top:16px;
  padding:20px;
  overflow:hidden;
  border:1px solid #E5D6B3;
  border-radius:18px;
  background:
    radial-gradient(circle at 78% 16%, rgba(234,170,60,.24) 0 42px, transparent 43px),
    linear-gradient(145deg,#fff 0%,#fff8e8 48%,#eaf5f2 100%);
  box-shadow:0 12px 28px rgba(22,35,63,.08);
}
.el-compose-display-ad::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:5px;
  background:linear-gradient(180deg,var(--el-mustard),var(--el-teal));
}
.el-display-ad-label{
  position:absolute;
  top:12px;
  right:14px;
  padding:2px 7px;
  border:1px solid rgba(22,35,63,.08);
  border-radius:999px;
  background:rgba(255,255,255,.75);
  color:var(--el-ink-faint);
  font:700 9px/1.5 var(--font-mono);
  letter-spacing:.08em;
}
.el-display-ad-visual{
  position:relative;
  height:105px;
  margin-top:8px;
}
.el-display-ad-visual .globe{
  position:absolute;
  top:0;
  right:12px;
  display:grid;
  place-items:center;
  width:78px;
  height:78px;
  border:2px solid rgba(47,143,130,.45);
  border-radius:50%;
  color:var(--el-teal);
  font-size:42px;
  font-weight:300;
  transform:rotate(-10deg);
}
.el-display-ad-visual .box{
  position:absolute;
  width:48px;
  height:36px;
  border-radius:4px;
  background:linear-gradient(135deg,#F6C866,#EAAA3C);
  box-shadow:inset -8px -6px 0 rgba(200,138,36,.13);
}
.el-display-ad-visual .box::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:2px;
  height:100%;
  background:rgba(200,138,36,.45);
}
.el-display-ad-visual .box--1{ left:8px; bottom:7px; }
.el-display-ad-visual .box--2{ left:42px; bottom:24px; transform:scale(.75); }
.el-display-ad-visual .route{
  position:absolute;
  left:48px;
  right:54px;
  bottom:16px;
  height:36px;
  border-top:2px dashed rgba(47,143,130,.45);
  border-radius:50%;
  transform:rotate(-9deg);
}
.el-display-ad-copy{ position:relative; z-index:2; margin-top:auto; }
.el-display-ad-copy small{
  display:block;
  color:var(--el-mustard-deep);
  font:700 10px/1.2 var(--font-mono);
  letter-spacing:.08em;
}
.el-display-ad-copy strong{
  display:block;
  margin-top:6px;
  color:var(--el-navy);
  font-family:var(--font-display);
  font-size:22px;
  line-height:1.15;
}
.el-display-ad-copy span{
  display:block;
  margin-top:8px;
  color:var(--el-navy-soft);
  font-size:11px;
}
.el-display-ad-cta{
  margin-top:14px;
  color:var(--el-teal-deep);
  font-size:11px;
  font-weight:800;
}



/* ===== New topic: right display ad ===== */
.el-compose-display-ad{
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;
  min-height:250px;
  aspect-ratio:1/1;
  margin-top:16px;
  padding:18px;
  overflow:hidden;
  border:1px solid #E6D8B7;
  border-radius:18px;
  background:linear-gradient(145deg,#FFFDF8 0%,#FFF6E4 56%,#EDF7F4 100%);
  box-shadow:0 10px 28px rgba(22,35,63,.08);
  color:var(--el-navy);
}
.el-compose-display-ad::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:5px;
  background:linear-gradient(180deg,var(--el-mustard),var(--el-teal));
}
.el-display-ad-label{
  position:absolute;
  top:12px;
  right:12px;
  z-index:3;
  padding:3px 7px;
  border:1px solid rgba(22,35,63,.08);
  border-radius:999px;
  background:rgba(255,255,255,.88);
  color:var(--el-ink-faint);
  font:700 9px/1.2 var(--font-mono);
  letter-spacing:.08em;
}
.el-display-ad-art{
  height:118px;
  margin:-2px -2px 10px;
}
.el-display-ad-art svg{
  width:100%;
  height:100%;
  display:block;
}
.el-display-ad-copy{
  position:relative;
  z-index:2;
  margin-top:auto;
}
.el-display-ad-copy small{
  display:block;
  margin-bottom:5px;
  color:var(--el-mustard-deep);
  font:700 10px/1.2 var(--font-mono);
  letter-spacing:.08em;
}
.el-display-ad-copy strong{
  display:block;
  margin:0;
  color:var(--el-navy);
  font-family:var(--font-display);
  font-size:20px;
  line-height:1.28;
}
.el-display-ad-copy span{
  display:block;
  margin-top:7px;
  color:var(--el-navy-soft);
  font-size:11px;
  line-height:1.6;
}
.el-display-ad-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:flex-start;
  min-height:34px;
  margin-top:14px;
  padding:7px 13px;
  border-radius:999px;
  background:var(--el-navy);
  color:#fff;
  font-size:11px;
  font-weight:700;
}
.el-compose-display-ad:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 34px rgba(22,35,63,.11);
}
@media(max-width:900px){
  .el-compose-display-ad{
    width:min(320px,100%);
    min-height:250px;
    aspect-ratio:auto;
  }
}


/* ===== New topic: multiple categories / smart hashtags ===== */
.el-category-picker{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.el-category-picker label{
  cursor:pointer;
}
.el-category-picker input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.el-category-picker span{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:6px 13px;
  border:1px solid var(--el-line);
  border-radius:10px;
  background:#fff;
  color:var(--el-navy-soft);
  font-size:12.5px;
  font-weight:600;
}
.el-category-picker input:checked + span{
  border-color:rgba(47,143,130,.38);
  background:var(--el-teal-tint);
  color:var(--el-teal-deep);
  box-shadow:inset 0 0 0 1px rgba(47,143,130,.06);
}

.el-tag-recommend-wrap{
  margin-bottom:14px;
}
.el-tag-recommend-label{
  display:block;
  margin-bottom:7px;
  color:var(--el-ink-faint);
  font-size:11px;
  font-weight:600;
}
.el-tag-picker--recommend{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.el-tag-recommend-chip{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:5px 11px;
  border:1px solid rgba(47,143,130,.24);
  border-radius:999px;
  background:var(--el-teal-tint);
  color:var(--el-teal-deep);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
.el-tag-recommend-chip:hover{
  border-color:var(--el-teal);
}

.el-tag-input-wrap{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  max-width:520px;
}
.el-tag-input-wrap .tag-prefix{
  color:var(--el-teal);
  font-size:18px;
  font-weight:800;
}
.el-tag-input-wrap input{
  width:100%;
  height:40px;
  border:0;
  border-bottom:1px solid var(--el-line);
  background:transparent;
  outline:none;
  color:var(--el-navy);
  font:500 13px var(--font-body);
}
.el-tag-input-wrap input:focus{
  border-bottom-color:var(--el-teal);
}
.el-tag-input-wrap > button{
  border:0;
  background:transparent;
  color:var(--el-teal-deep);
  font-size:12px;
  font-weight:800;
}
.el-tag-suggestions{
  position:absolute;
  z-index:70;
  left:26px;
  right:58px;
  top:44px;
  overflow:hidden;
  border:1px solid var(--el-line-soft);
  border-radius:10px;
  background:#fff;
  box-shadow:0 12px 28px rgba(22,35,63,.12);
}
.el-tag-suggestions button{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  width:100%;
  padding:10px 12px;
  border:0;
  border-bottom:1px solid var(--el-line-soft);
  background:#fff;
  color:var(--el-navy-soft);
  text-align:left;
}
.el-tag-suggestions button:last-child{
  border-bottom:0;
}
.el-tag-suggestions button:hover{
  background:#F7FAF9;
}
.el-tag-suggestions strong{
  font-size:12.5px;
  color:var(--el-navy);
}
.el-tag-suggestions span{
  color:var(--el-ink-faint);
  font-size:10px;
}
.el-tag-suggestions .is-create strong{
  color:var(--el-teal-deep);
}
.el-selected-tags{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:12px;
}
.el-selected-tag{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:32px;
  padding:5px 9px 5px 11px;
  border:1px solid var(--el-line);
  border-radius:999px;
  background:#fff;
  color:var(--el-navy-soft);
  font-size:12px;
  font-weight:700;
}
.el-selected-tag b{
  color:var(--el-ink-faint);
  font-size:13px;
  line-height:1;
}

/* SHiFT info link inside visibility explanation */
.el-visibility-option .el-note-link{
  display:inline;
  margin-left:3px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--el-teal-deep);
  font:700 10px/1.4 var(--font-body);
  text-decoration:underline;
  text-underline-offset:2px;
}

@media(max-width:640px){
  .el-tag-input-wrap{
    max-width:none;
  }
}