/* =========================================================================
   SQADD — design system  (derived from the SQADD / HIPHOP CREDITS INDEX logo)
   near-black ground · warm white · single lime accent · condensed oblique
   ========================================================================= */
:root{
  --bg:#0b0b0c;
  --bg-1:#0f0f11;
  --panel:#141417;
  --raised:#1a1a1e;
  --line:rgba(236,236,230,.10);
  --line-2:rgba(236,236,230,.16);
  --ink:#ececea;
  --ink-2:#b6b6b0;
  --muted:#85857e;
  --faint:#5d5d57;
  --lime:#c7f23c;
  --lime-2:#d6f95f;
  --lime-deep:#a4cf28;
  --on-lime:#10130a;
  --r:6px;
  --r-lg:10px;
  --maxw:1200px;
  --pad:clamp(16px,4vw,40px);
  --f-disp:"Saira Condensed","Zen Kaku Gothic New",system-ui,sans-serif;
  --f-body:"Zen Kaku Gothic New",system-ui,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--f-body);font-size:15px;line-height:1.7;
  font-feature-settings:"palt" 1;letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--lime);color:var(--on-lime)}
:focus-visible{outline:2px solid var(--lime);outline-offset:2px;border-radius:3px}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

/* ---- the signature: a skewed lime slash, echoing the logo's "A" stroke ---- */
.slash{display:inline-block;width:.42em;height:1em;background:var(--lime);
  transform:skewX(-12deg);vertical-align:-.08em;border-radius:1px}
.tick{display:inline-block;width:10px;height:16px;background:var(--lime);
  transform:skewX(-12deg);border-radius:1px;flex:0 0 auto}

/* ---- mono eyebrow / section label ---- */
.eyebrow{display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-mono);font-weight:700;font-size:11px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--muted)}
.eyebrow .tick{height:12px;width:8px}
.eyebrow.lime{color:var(--lime)}

/* ---- display headings ---- */
h1,h2,h3{margin:0;font-family:var(--f-disp);font-weight:800;line-height:1.02;
  letter-spacing:.005em}
.h-xl{font-size:clamp(40px,8vw,86px);font-weight:900;line-height:.94}
.h-lg{font-size:clamp(28px,4.4vw,46px)}
.h-md{font-size:clamp(22px,3vw,30px)}
.jp{font-family:var(--f-body);font-weight:900;letter-spacing:.02em;line-height:1.18}
.oblique{transform:skewX(-8deg)}

/* =========================== wordmark =================================== */
.brand{display:inline-flex;align-items:baseline;gap:.5em;line-height:1}
.brand .mark{font-family:var(--f-disp);font-weight:900;font-size:26px;
  letter-spacing:.01em;transform:skewX(-8deg);color:var(--ink)}
.brand .mark .a{color:var(--lime)}
.brand .tag{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.34em;
  color:var(--lime);transform:translateY(-3px)}

/* =========================== header ==================================== */
.site-head{position:sticky;top:0;z-index:60;background:rgba(11,11,12,.78);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.site-head .bar{display:flex;align-items:center;gap:24px;height:64px}
.nav{display:flex;align-items:center;gap:26px;margin-left:auto}
.nav a:not(.btn){font-size:13.5px;color:var(--ink-2);transition:color .15s}
.nav a:not(.btn):hover{color:var(--ink)}
.nav .login{color:var(--ink)}
.burger{display:none;margin-left:auto;width:42px;height:42px;border:1px solid var(--line-2);
  border-radius:var(--r);align-items:center;justify-content:center}
.burger span{width:16px;height:2px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:16px;height:2px;background:var(--ink)}
.burger span::before{top:-5px}.burger span::after{top:5px}

/* =========================== buttons =================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:46px;padding:0 22px;border-radius:var(--r);font-weight:700;font-size:14px;
  letter-spacing:.02em;white-space:nowrap;transition:transform .12s,background .15s,border-color .15s,color .15s}
.btn:active{transform:translateY(1px)}
.btn-lime{background:var(--lime);color:var(--on-lime);position:relative;
  clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.btn-lime:hover{background:var(--lime-2)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2)}
.btn-ghost:hover{border-color:var(--ink);background:rgba(236,236,230,.04)}
.btn-solid{background:var(--ink);color:#0b0b0c}
.btn-solid:hover{background:#fff}
.btn-sm{height:38px;padding:0 16px;font-size:13px}
.btn-block{width:100%}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}

/* =========================== form controls ============================= */
.field{display:block;margin-bottom:16px}
.field>label,.lbl{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;
  letter-spacing:.04em;color:var(--ink-2);margin-bottom:7px}
.lbl .opt{font-weight:500;color:var(--faint);letter-spacing:.02em}
.req{display:inline-block;background:var(--lime);color:#0b0b0c;font-family:var(--f-mono);font-size:10px;font-weight:700;letter-spacing:.04em;padding:1px 7px;border-radius:4px;vertical-align:middle}
.control,select.control,textarea.control,input.control{
  width:100%;height:46px;padding:0 14px;background:var(--bg-1);
  border:1px solid var(--line-2);border-radius:var(--r);color:var(--ink);
  font-size:14px;transition:border-color .15s,background .15s}
textarea.control{height:auto;padding:12px 14px;line-height:1.7;resize:vertical;min-height:104px}
.control::placeholder{color:var(--faint)}
.control:hover{border-color:rgba(236,236,230,.28)}
.control:focus{outline:none;border-color:var(--lime);background:#101012}
select.control{appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%2385857e' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.with-prefix{position:relative}
.with-prefix .pfx{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:var(--muted);font-family:var(--f-mono);font-size:13px;pointer-events:none}
.with-prefix .control{padding-left:30px}
.hint{font-size:11.5px;color:var(--faint);margin-top:6px;line-height:1.5}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}

/* ---- choice chips (the only way to pick predefined options) ---- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:var(--r);
  background:var(--bg-1);border:1px solid var(--line-2);font-size:12.5px;color:var(--ink-2);
  cursor:pointer;user-select:none;transition:all .14s}
.chip:hover{border-color:rgba(236,236,230,.32);color:var(--ink)}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip .box{width:14px;height:14px;border:1.5px solid var(--faint);border-radius:3px;
  display:grid;place-items:center;transition:all .14s}
.chip.sel,.chip:has(input:checked){background:rgba(199,242,60,.12);border-color:var(--lime);color:var(--ink)}
.chip.sel .box,.chip:has(input:checked) .box{background:var(--lime);border-color:var(--lime)}
.chip.sel .box::after,.chip:has(input:checked) .box::after{content:"";width:8px;height:5px;
  border-left:2px solid var(--on-lime);border-bottom:2px solid var(--on-lime);
  transform:rotate(-45deg) translateY(-1px)}

/* read-only display tags (profile + cards) */
.tags{display:flex;flex-wrap:wrap;gap:7px}
.tag{padding:5px 11px;border-radius:4px;background:var(--raised);border:1px solid var(--line);
  font-size:12px;color:var(--ink-2);letter-spacing:.01em}

/* =========================== footer =================================== */
.site-foot{border-top:1px solid var(--line);margin-top:96px;background:var(--bg-1)}
.site-foot .top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding:56px 0 44px}
.foot-col .foot-h{font-family:var(--f-mono);font-size:11px;letter-spacing:.24em;color:var(--muted);
  text-transform:uppercase;margin:0 0 16px;font-weight:700}
.foot-col a{display:block;color:var(--ink-2);font-size:13.5px;padding:5px 0;transition:color .15s}
.foot-col a:hover{color:var(--lime)}
.foot-lede{color:var(--muted);font-size:13px;max-width:34ch;margin:14px 0 0}
.site-foot .btm{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:20px 0;border-top:1px solid var(--line);color:var(--faint);font-size:12px;
  font-family:var(--f-mono);letter-spacing:.08em;flex-wrap:wrap}

/* =========================== search block ============================== */
.search{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(18px,3vw,26px)}
.search-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr 1fr auto;gap:12px;align-items:end}
.search-grid .sg-go{height:46px;white-space:nowrap}
.search-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:14px;flex-wrap:wrap}
.morelink{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-2);
  font-weight:700;letter-spacing:.02em}
.morelink:hover{color:var(--lime)}
.morelink .plus{width:22px;height:22px;border:1px solid var(--line-2);border-radius:5px;
  display:grid;place-items:center;font-family:var(--f-mono);color:var(--lime)}

/* =========================== member cards ============================= */
.count{display:flex;align-items:baseline;gap:10px;margin:8px 0 18px;flex-wrap:wrap}
.count b{font-family:var(--f-disp);font-weight:900;font-size:30px;color:var(--ink);transform:skewX(-6deg)}
.count .u{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;position:relative;transition:border-color .18s,transform .18s}
.card::after{content:"";position:absolute;top:0;right:0;width:0;height:0;
  border-style:solid;border-width:0 22px 22px 0;border-color:transparent var(--lime) transparent transparent;
  opacity:0;transition:opacity .18s}
.card:hover{border-color:var(--line-2);transform:translateY(-3px)}
.card:hover::after{opacity:1}
.card a.cover{position:relative;aspect-ratio:16/10;display:block;
  background:linear-gradient(135deg,#1d1d22,#101013);overflow:hidden}
.card .ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--faint);
  font-family:var(--f-mono);font-size:10px;letter-spacing:.2em}
.card .rolecode{position:absolute;left:12px;top:12px;font-family:var(--f-mono);font-weight:700;
  font-size:10px;letter-spacing:.16em;color:var(--on-lime);background:var(--lime);
  padding:4px 8px;border-radius:4px;transform:skewX(-8deg)}
.card .body{padding:16px;display:flex;flex-direction:column;gap:10px;flex:1}
.card .role{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;color:var(--muted);
  line-height:1.5}
.card .name{font-family:var(--f-disp);font-weight:800;font-size:23px;line-height:1.05;letter-spacing:.01em}
.card .area{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink-2)}
.card .area svg{flex:0 0 auto;opacity:.6}
.card .bio{font-size:12.5px;color:var(--ink-2);line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .detail{display:flex;flex-wrap:wrap;gap:6px}
.card .detail .tag{padding:4px 9px;font-size:11px}
.card .menu{margin-top:auto;border-top:1px solid var(--line);padding-top:11px;display:flex;flex-direction:column;gap:5px}
.card .menu .row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:12.5px}
.card .menu .row .mn{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .menu .row .pr{font-family:var(--f-mono);color:var(--ink);white-space:nowrap;font-size:12px}
.card .menu .row .pr u{color:var(--muted);text-decoration:none;font-size:10.5px}
.card .menu .more{font-size:11px;color:var(--faint)}
.card .foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 16px;border-top:1px solid var(--line);background:var(--bg-1)}
.card .links{display:flex;gap:9px;color:var(--muted)}
.card .links svg{width:16px;height:16px;transition:color .15s}
.card .links a:hover svg{color:var(--lime)}
.card .see{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:var(--ink);
  display:inline-flex;align-items:center;gap:6px;font-weight:700}
.card .see:hover{color:var(--lime)}

/* =========================== pagination =============================== */
.pager{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:36px}
.pager a,.pager span{min-width:42px;height:42px;display:grid;place-items:center;border-radius:var(--r);
  border:1px solid var(--line-2);font-family:var(--f-mono);font-size:13px;color:var(--ink-2);padding:0 12px}
.pager a:hover{border-color:var(--ink);color:var(--ink)}
.pager .cur{background:var(--lime);border-color:var(--lime);color:var(--on-lime);font-weight:700}
.pager .nxt{gap:7px}

/* =========================== internal link blocks ===================== */
.linkblock{margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
.linkblock h2{font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;color:var(--muted);
  text-transform:uppercase;margin:0 0 14px;display:flex;align-items:center;gap:9px;font-weight:700}
.linkrow{display:flex;flex-wrap:wrap;gap:7px}
.linkrow a{font-size:12.5px;color:var(--ink-2);padding:6px 12px;border:1px solid var(--line);
  border-radius:5px;transition:all .14s}
.linkrow a:hover{border-color:var(--lime);color:var(--ink)}

/* =========================== filter drawer ============================ */
.drawer-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;z-index:80}
.drawer-bg.open{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(440px,92vw);background:var(--bg-1);
  border-left:1px solid var(--line-2);z-index:81;transform:translateX(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}
.drawer.open{transform:none}
.drawer .dhead{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;
  border-bottom:1px solid var(--line)}
.drawer .dbody{padding:22px;overflow:auto;flex:1}
.drawer .dfoot{padding:16px 22px;border-top:1px solid var(--line);background:var(--panel)}
.xbtn{width:38px;height:38px;border:1px solid var(--line-2);border-radius:var(--r);display:grid;place-items:center;color:var(--ink-2)}
.xbtn:hover{color:var(--ink);border-color:var(--ink)}

@media (max-width:1000px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .search-grid{grid-template-columns:1fr 1fr 1fr}
  .search-grid .sg-go{grid-column:1/-1;justify-self:end;min-width:210px;margin-top:2px}
  .site-foot .top{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .nav{display:none}.burger{display:flex}
  .cards{grid-template-columns:1fr}
  .search-grid{grid-template-columns:1fr 1fr}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .site-foot .top{grid-template-columns:1fr;gap:28px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* =========================================================================
   PROFILE DETAIL
   ========================================================================= */
.pf-hero{padding:34px 0 30px;border-bottom:1px solid var(--line)}
.pf-hero .role-code{font-family:var(--f-mono);font-weight:700;font-size:11px;letter-spacing:.16em;
  color:var(--on-lime);background:var(--lime);padding:5px 10px;border-radius:5px;transform:skewX(-8deg);display:inline-block}
.pf-hero h1{font-size:clamp(34px,6vw,60px);font-weight:900;line-height:.96;margin:16px 0 10px;letter-spacing:.01em}
.pf-roles{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.pf-roles .r{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--ink-2);
  border:1px solid var(--line-2);padding:5px 11px;border-radius:5px}
.pf-arealine{display:flex;align-items:center;gap:8px;color:var(--ink-2);font-size:13px;margin-bottom:16px}
.pf-bio{font-size:15px;color:var(--ink-2);line-height:1.85;max-width:62ch}

.pf-layout{display:grid;grid-template-columns:1fr 340px;gap:40px;align-items:start;padding-top:34px}
.pf-side{position:sticky;top:88px;display:flex;flex-direction:column;gap:14px}
.side-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.side-photo{aspect-ratio:1;background:linear-gradient(140deg,#1e1e24,#101013);display:grid;place-items:center;
  color:var(--faint);font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;position:relative}
.side-photo .code{position:absolute;left:12px;top:12px;color:var(--on-lime);background:var(--lime);
  font-weight:700;font-size:10px;letter-spacing:.14em;padding:4px 8px;border-radius:4px;transform:skewX(-8deg)}
.side-pad{padding:18px}
.side-pad .ttl{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.2em;color:var(--muted);
  text-transform:uppercase;margin-bottom:13px;display:flex;align-items:center;gap:8px;font-weight:700}
/* prominent LINKS = the conversion path */
.links-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.linkbtn{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--line-2);
  border-radius:var(--r);background:var(--bg-1);font-size:12.5px;color:var(--ink);transition:all .15s}
.linkbtn svg{width:17px;height:17px;color:var(--ink-2);flex:0 0 auto;transition:color .15s}
.linkbtn:hover{border-color:var(--lime);background:rgba(199,242,60,.08)}
.linkbtn:hover svg{color:var(--lime)}
.linkbtn.full{grid-column:1/-1;justify-content:center;font-weight:700;font-family:var(--f-mono);
  font-size:12px;letter-spacing:.06em}
.side-note{font-size:11.5px;color:var(--faint);line-height:1.6;margin-top:12px;text-align:center}
.side-menu .row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.side-menu .row:last-child{border-bottom:0}
.side-menu .row .pr{font-family:var(--f-mono);color:var(--ink);white-space:nowrap;font-size:12.5px}
.side-menu .row .pr u{color:var(--muted);text-decoration:none;font-size:10.5px}

/* main column sections, grouped per role */
.role-group{margin-bottom:8px}
.role-group .role-head{display:flex;align-items:center;gap:12px;margin:30px 0 18px}
.role-group .role-head .nm{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;color:var(--lime);
  font-weight:700;text-transform:uppercase}
.role-group .role-head .ln{height:1px;background:var(--line);flex:1}
.sec{margin-bottom:26px}
.sec>.eyebrow{margin-bottom:14px}

.work-scroll{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.work{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel);transition:border-color .15s}
.work:hover{border-color:var(--line-2)}
.work .thumb{aspect-ratio:16/10;background:linear-gradient(135deg,#1d1d22,#101013);position:relative;display:grid;place-items:center}
.work .thumb .pl{color:var(--faint);font-family:var(--f-mono);font-size:9px;letter-spacing:.16em}
.work .thumb .play{position:absolute;width:34px;height:34px;border-radius:50%;background:rgba(11,11,12,.7);
  border:1px solid var(--line-2);display:grid;place-items:center;color:var(--ink)}
.work .wpad{padding:11px 12px}
.work .wt{font-size:13px;font-weight:700;color:var(--ink);line-height:1.35;margin-bottom:5px;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.work .wr{font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;color:var(--muted)}

.detail-groups{display:grid;grid-template-columns:1fr 1fr;gap:18px 26px}
.dgroup .dlabel{font-size:11.5px;font-weight:700;color:var(--muted);margin-bottom:9px;letter-spacing:.03em}
.dtext{display:flex;flex-direction:column;gap:7px}
.dtext .row{display:flex;gap:12px;font-size:13px;border-bottom:1px solid var(--line);padding-bottom:7px}
.dtext .row .k{color:var(--muted);min-width:5em;flex:0 0 auto}
.dtext .row .v{color:var(--ink)}

.menu-table{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.menu-table .mrow{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;
  padding:14px 16px;border-bottom:1px solid var(--line)}
.menu-table .mrow:last-child{border-bottom:0}
.menu-table .mrow:nth-child(odd){background:rgba(236,236,230,.015)}
.menu-table .mn{font-size:14px;color:var(--ink)}
.menu-table .mn small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}
.menu-table .pr{font-family:var(--f-mono);font-size:16px;color:var(--lime);white-space:nowrap;text-align:right}
.menu-table .pr u{color:var(--muted);text-decoration:none;font-size:11px;margin-left:2px}

.area-flags{display:flex;flex-wrap:wrap;gap:7px}
.area-flags .f{font-size:12.5px;color:var(--ink-2);padding:6px 12px;border:1px solid var(--line);border-radius:5px}
.area-flags .f.nw{border-color:var(--lime);color:var(--ink)}
.info-line{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-2);
  border:1px solid var(--line);border-radius:5px;padding:8px 13px}
.info-line .dot{width:7px;height:7px;border-radius:50%;background:var(--lime)}

@media (max-width:900px){
  .pf-layout{grid-template-columns:1fr;gap:24px}
  .pf-side{position:static;order:-1}
  .work-scroll{grid-template-columns:1fr 1fr}
  .detail-groups{grid-template-columns:1fr}
}
@media (max-width:560px){.work-scroll{grid-template-columns:1fr 1fr}.links-grid{grid-template-columns:1fr}}

/* =========================================================================
   PROFILE BUILDER (account / edit)
   ========================================================================= */
.builder{display:grid;grid-template-columns:1fr 360px;gap:34px;align-items:start;padding-top:28px}
.b-main{min-width:0;display:flex;flex-direction:column;gap:16px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px clamp(16px,2.4vw,26px)}
.panel-head{display:flex;align-items:center;gap:11px;margin-bottom:6px}
.panel-head .n{font-family:var(--f-mono);font-size:11px;color:var(--on-lime);background:var(--lime);
  width:24px;height:24px;border-radius:5px;display:grid;place-items:center;font-weight:700;transform:skewX(-8deg)}
.panel-head h2{font-size:21px;font-weight:800}
.panel-head .sub{font-size:12px;color:var(--muted);margin:2px 0 0}
.panel-sep{height:1px;background:var(--line);margin:18px 0}

/* publish toggle */
.toggle{display:inline-flex;align-items:center;gap:11px;cursor:pointer}
.toggle input{position:absolute;opacity:0}
.toggle .track{width:46px;height:26px;border-radius:14px;background:var(--raised);border:1px solid var(--line-2);
  position:relative;transition:all .18s}
.toggle .track::after{content:"";position:absolute;left:3px;top:2px;width:20px;height:20px;border-radius:50%;
  background:var(--muted);transition:all .18s}
.toggle input:checked+.track{background:rgba(199,242,60,.2);border-color:var(--lime)}
.toggle input:checked+.track::after{left:23px;background:var(--lime)}
.toggle .state{font-size:13px;font-weight:700;color:var(--ink-2)}

/* upload zones */
.uploads{display:grid;grid-template-columns:140px 1fr;gap:14px}
.drop{border:1.5px dashed var(--line-2);border-radius:var(--r);background:var(--bg-1);
  display:grid;place-items:center;text-align:center;padding:18px 12px;cursor:pointer;transition:all .15s;gap:6px}
.drop:hover{border-color:var(--lime);background:rgba(199,242,60,.04)}
.drop.main{aspect-ratio:1}
.drop.cover{aspect-ratio:auto}
.drop .ic{width:30px;height:30px;color:var(--muted)}
.drop .t{font-size:12px;color:var(--ink-2);font-weight:700}
.drop .s{font-size:10.5px;color:var(--faint)}

/* links inputs with leading icon */
.linkin{display:flex;align-items:center;gap:0;margin-bottom:10px;border:1px solid var(--line-2);
  border-radius:var(--r);background:var(--bg-1);overflow:hidden;transition:border-color .15s}
.linkin:focus-within{border-color:var(--lime)}
.linkin .ic{width:46px;height:46px;display:grid;place-items:center;color:var(--ink-2);
  border-right:1px solid var(--line);flex:0 0 auto;background:var(--panel)}
.linkin .ic svg{width:17px;height:17px}
.linkin input{flex:1;height:46px;border:0;background:transparent;padding:0 13px;font-size:13.5px}
.linkin input:focus{outline:none}

/* role selector */
.role-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.rcard{position:relative;border:1px solid var(--line-2);border-radius:var(--r);background:var(--bg-1);
  padding:14px;cursor:pointer;transition:all .15s;min-height:78px;display:flex;flex-direction:column;gap:6px}
.rcard:hover{border-color:rgba(236,236,230,.32)}
.rcard input{position:absolute;opacity:0}
.rcard .code{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;color:var(--muted)}
.rcard .nm{font-size:13px;font-weight:700;color:var(--ink);line-height:1.3}
.rcard .chk{position:absolute;top:11px;right:11px;width:18px;height:18px;border:1.5px solid var(--faint);
  border-radius:4px;display:grid;place-items:center;transition:all .15s}
.rcard.sel{border-color:var(--lime);background:rgba(199,242,60,.09)}
.rcard.sel .chk{background:var(--lime);border-color:var(--lime)}
.rcard.sel .chk::after{content:"";width:8px;height:5px;border-left:2px solid var(--on-lime);
  border-bottom:2px solid var(--on-lime);transform:rotate(-45deg) translateY(-1px)}
.rcard.sel .code{color:var(--lime-deep)}

.pick-hint{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted);margin:14px 0 0}

/* revealed role panels */
#rolePanels:empty{display:none}
.rolepanel{border:1px solid var(--line-2);border-left:3px solid var(--lime);border-radius:var(--r);
  background:var(--bg-1);margin-top:14px;overflow:hidden;animation:slidein .3s ease}
@keyframes slidein{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.rolepanel .rp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;background:var(--panel);border-bottom:1px solid var(--line)}
.rolepanel .rp-head .l{display:flex;align-items:center;gap:11px}
.rolepanel .rp-head .code{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;color:var(--on-lime);
  background:var(--lime);padding:4px 8px;border-radius:4px;transform:skewX(-8deg);font-weight:700}
.rolepanel .rp-head .nm{font-size:15px;font-weight:800;font-family:var(--f-disp);letter-spacing:.01em}
.rolepanel .rp-body{padding:18px}
.subhead{display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11px;
  letter-spacing:.14em;color:var(--ink-2);text-transform:uppercase;font-weight:700;
  margin:20px 0 11px;padding-top:18px;border-top:1px solid var(--line)}
.subhead:first-child{margin-top:0;padding-top:0;border-top:0}
.subhead .add{margin-left:auto;font-family:var(--f-body);text-transform:none;letter-spacing:.01em;
  font-size:12px;color:var(--lime);border:1px solid var(--line-2);border-radius:5px;padding:5px 11px;
  display:inline-flex;align-items:center;gap:6px;font-weight:700}
.subhead .add:hover{border-color:var(--lime)}

.repeat-row{border:1px solid var(--line);border-radius:var(--r);padding:13px;margin-bottom:10px;
  background:var(--panel);position:relative}
.repeat-row .del{position:absolute;top:9px;right:9px;width:26px;height:26px;border-radius:5px;
  color:var(--faint);display:grid;place-items:center;border:1px solid transparent}
.repeat-row .del:hover{color:#ff7a7a;border-color:var(--line-2)}
.price-row{display:grid;grid-template-columns:1.6fr 1fr 1.1fr;gap:10px}

.dgrp{margin-bottom:14px}
.dgrp .dh{font-size:11.5px;font-weight:700;color:var(--muted);margin-bottom:9px;letter-spacing:.02em}

/* sticky preview */
.b-side{position:sticky;top:88px;display:flex;flex-direction:column;gap:14px}
.preview-shell{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.preview-shell .ph-top{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;
  border-bottom:1px solid var(--line)}
.preview-shell .ph-top .t{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;color:var(--muted);font-weight:700}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:6px;overflow:hidden}
.seg button{padding:5px 11px;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;color:var(--muted);background:transparent}
.seg button.on{background:var(--lime);color:var(--on-lime);font-weight:700}
.pv-pad{padding:16px}
.pv-card .pv-cover{aspect-ratio:16/10;border-radius:var(--r);background:linear-gradient(135deg,#1d1d22,#101013);
  display:grid;place-items:center;color:var(--faint);font-family:var(--f-mono);font-size:9px;letter-spacing:.18em;margin-bottom:12px;position:relative}
.pv-card .pv-role{font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;color:var(--muted)}
.pv-card .pv-name{font-family:var(--f-disp);font-weight:800;font-size:21px;margin:3px 0 7px;line-height:1.05}
.pv-card .pv-name.empty{color:var(--faint)}
.pv-card .pv-bio{font-size:12px;color:var(--ink-2);line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.4em}
.publish-bar{position:sticky;bottom:0;background:var(--bg-1);border:1px solid var(--line-2);
  border-radius:var(--r-lg);padding:14px}
.publish-bar .row1{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px}
.publish-bar .lbl2{font-size:12px;color:var(--ink-2);font-weight:700}

@media (max-width:980px){
  .builder{grid-template-columns:1fr}
  .b-side{position:static;order:-1}
  .role-pick{grid-template-columns:1fr 1fr}
  .price-row{grid-template-columns:1fr}
}
@media (max-width:560px){.uploads{grid-template-columns:1fr}}

/* =========================================================================
   HERO (2-column: headline + featured member)  — index
   ========================================================================= */
.hero{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:clamp(28px,4vw,52px);
  align-items:center;padding:clamp(40px,6vw,78px) 0 0}
.hero-text{min-width:0}
.hero-h{font-family:var(--f-body);font-weight:900;font-size:clamp(33px,5.9vw,72px);
  line-height:1.03;letter-spacing:.012em;margin:20px 0 0}
.hero-h .ln{display:block;white-space:nowrap}
.hero-h .hl{color:var(--lime)}
.hero-lede{color:var(--ink-2);font-size:16px;line-height:1.85;max-width:44ch;margin:22px 0 0}
.feature{display:flex;flex-direction:column;gap:11px}
.feat-cap{display:flex;align-items:center;justify-content:space-between;gap:10px}
.feat-cap .morelink{font-size:12px}
@media (max-width:880px){
  .hero{grid-template-columns:1fr;gap:0}
  .hero-h{font-size:clamp(32px,8.4vw,58px)}
  .hero-art{display:none}
  .hero-text{text-align:center}
  .hero-lede{margin-inline:auto}
  .hero .btn-row{justify-content:center}
}

/* hero-right brand visual (swappable for a real photo / illustration) */
.hero-art{display:flex;flex-direction:column}
.art-panel{position:relative;aspect-ratio:4/5;border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:radial-gradient(120% 90% at 72% 18%,#18181d 0%,#0d0d0f 62%);overflow:hidden;display:grid;place-items:center}
.art-panel::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(118deg,transparent 0 40px,rgba(199,242,60,.04) 40px 43px)}
.art-panel::after{content:"";position:absolute;width:130%;height:36px;top:62%;left:-15%;
  background:var(--lime);opacity:.06;transform:skewY(-7deg)}
.art-lock{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:16px}
.art-mark{font-family:var(--f-disp);font-weight:900;font-size:clamp(58px,8vw,100px);line-height:.9;
  letter-spacing:.012em;color:var(--ink);transform:skewX(-8deg)}
.art-mark .a{color:var(--lime)}
.art-slash{width:56px;height:9px;background:var(--lime);transform:skewX(-12deg);border-radius:2px;
  box-shadow:0 0 26px rgba(199,242,60,.5)}
.art-tag{font-family:var(--f-mono);font-weight:700;font-size:clamp(10px,1.3vw,13px);letter-spacing:.3em;color:var(--lime)}

/* =========================================================================
   LIST PAGES (results / role / area / role×area) + TEXT PAGES
   ========================================================================= */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-family:var(--f-mono);
  font-size:11px;letter-spacing:.05em;color:var(--muted);padding:18px 0 0}
.crumbs a{color:var(--muted)}.crumbs a:hover{color:var(--lime)}
.crumbs .sep{color:var(--faint)}
.crumbs .cur{color:var(--ink-2)}
.page-head{padding:16px 0 26px;border-bottom:1px solid var(--line);margin-bottom:30px}
.page-head h1{font-size:clamp(30px,5vw,50px);font-weight:900;line-height:1.02;margin:14px 0 0;letter-spacing:.01em}
.page-intro{color:var(--ink-2);font-size:15px;line-height:1.85;max-width:60ch;margin:15px 0 0}
.result-count{display:flex;align-items:baseline;gap:9px;margin:0 0 18px;font-size:13px;color:var(--muted)}
.result-count b{font-family:var(--f-disp);font-weight:900;font-size:26px;color:var(--ink);transform:skewX(-6deg)}
.result-count .hl{color:var(--ink)}

/* prose / legal */
.prose{max-width:760px;margin-inline:auto}
.prose .lead{color:var(--ink-2);font-size:16px;line-height:1.95;margin:0 0 26px}
.prose h2{font-family:var(--f-disp);font-weight:800;font-size:24px;margin:36px 0 12px;display:flex;align-items:center;gap:11px;letter-spacing:.01em}
.prose h2 .tick{height:17px}
.prose h3{font-size:16px;font-weight:700;margin:22px 0 8px;color:var(--ink)}
.prose p{color:var(--ink-2);line-height:1.95;margin:0 0 14px;font-size:14.5px}
.prose ul{color:var(--ink-2);line-height:1.9;padding-left:1.2em;margin:0 0 16px;font-size:14.5px}
.prose li{margin:0 0 6px}
.prose a:not(.btn){color:var(--lime);text-decoration:underline;text-underline-offset:3px}
.legal-art{border-top:1px solid var(--line);padding:18px 0}
.legal-art:first-of-type{border-top:0}
.legal-art .no{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--lime);font-weight:700}
.legal-art h2{margin:6px 0 7px;font-size:16px}
.legal-art p{margin:0;font-size:14px}
.legal-note{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--lime);
  border-radius:var(--r);padding:14px 16px;font-size:13px;color:var(--ink-2);line-height:1.8;margin:0 0 24px}
.updated{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;color:var(--faint);margin:0 0 26px}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:start}
.policy-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px}
.policy-card h3{font-size:14px;margin:0 0 9px;display:flex;align-items:center;gap:9px}
.policy-card p{font-size:13px;color:var(--ink-2);line-height:1.8;margin:0 0 16px}
.policy-card p:last-child{margin:0}
.xlink{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--ink);border:1px solid var(--line-2);
  border-radius:var(--r);padding:10px 14px;transition:all .15s}
.xlink:hover{border-color:var(--lime);color:var(--lime)}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr;gap:28px}}

/* about feature row */
.about-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
@media(max-width:760px){.about-steps{grid-template-columns:1fr}}
.about-step{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px}
.about-step .num{font-family:var(--f-disp);font-weight:900;font-size:30px;color:var(--lime);transform:skewX(-8deg)}
.about-step h3{font-size:16px;margin:10px 0 6px}
.about-step p{font-size:13px;color:var(--ink-2);line-height:1.75;margin:0}

/* about strengths list */
.str-list{list-style:none;padding:0;margin:0 0 8px}
.str-list li{position:relative;padding-left:24px;margin-bottom:15px;color:var(--ink-2);line-height:1.85;font-size:14.5px}
.str-list li::before{content:"";position:absolute;left:0;top:8px;width:11px;height:15px;background:var(--lime);transform:skewX(-12deg);border-radius:1px}
.str-list b{color:var(--ink);font-weight:700}

/* WordPress paginate_links + theme-independent template helpers */
.pager .current{background:var(--lime);border-color:var(--lime);color:var(--on-lime);font-weight:700}
.pager .dots{border:0;color:var(--faint)}
.cover img,.side-photo img,.work .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* contact form result banner */
.form-note{padding:13px 15px;border-radius:10px;font-size:13.5px;line-height:1.6;margin-bottom:18px;border:1px solid}
.form-note.ok{background:rgba(199,242,60,.10);border-color:rgba(199,242,60,.40);color:var(--ink)}
.form-note.err{background:rgba(255,90,90,.08);border-color:rgba(255,90,90,.40);color:#ffb4b4}

/* ⑫ active filter tags */
.filter-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:16px 0 0}
.filter-tags .ft-label{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;color:var(--muted);text-transform:uppercase}
.ft-tag{display:inline-flex;align-items:center;gap:8px;padding:6px 11px;border:1px solid var(--line-2);border-radius:999px;font-size:12.5px;color:var(--ink);background:var(--bg-1);text-decoration:none}
.ft-tag:hover{border-color:var(--lime)}
.ft-tag .x{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.08);color:var(--ink-2);font-size:12px;line-height:1}
.ft-tag:hover .x{background:var(--lime);color:var(--on-lime)}
.ft-clear{font-size:12px;color:var(--muted);text-decoration:underline;margin-left:4px}
.ft-clear:hover{color:var(--lime)}

/* ⑧ availability badge */
.status-badge{font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;padding:3px 8px;border-radius:999px;margin-left:10px;vertical-align:middle;white-space:nowrap}
.status-badge.open{background:rgba(199,242,60,.14);color:var(--lime);border:1px solid rgba(199,242,60,.35)}
.status-badge.closed{background:rgba(255,255,255,.05);color:var(--muted);border:1px solid var(--line-2)}

/* ⑩ profile gallery (detail sidebar) */
.side-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}
.side-gallery .sg{position:relative;aspect-ratio:1;border-radius:6px;overflow:hidden;border:1px solid var(--line-2);display:block}
.side-gallery .sg img{width:100%;height:100%;object-fit:cover;display:block}
.side-gallery .sg:hover{border-color:var(--lime)}

/* ⑤ per-role note */
.role-note{color:var(--ink-2);font-size:13.5px;line-height:1.75;white-space:pre-line;margin:0}

/* ⑥ bigger availability badge */
.status-badge{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;padding:5px 12px;border-radius:999px;margin-left:14px;vertical-align:middle;white-space:nowrap;font-weight:700}
.status-badge.open{background:rgba(199,242,60,.18);color:var(--lime);border:1px solid rgba(199,242,60,.5)}
.status-badge.closed{background:rgba(255,90,90,.12);color:#ff8e8e;border:1px solid rgba(255,90,90,.5)}

/* ② consistent logo↔badge gap in header & footer */
.brand{gap:11px}

/* ① how-to: 2-col on desktop, 1-col on mobile */
.howto-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:760px){.howto-grid{grid-template-columns:1fr}}

/* ⑦ gallery thumbs are now buttons (swap main) */
.side-gallery .sg{padding:0;background:none;cursor:pointer;width:100%}
.side-gallery .sg.active{border-color:var(--lime);box-shadow:0 0 0 1px var(--lime)}

/* ① footer brand: stop .foot-col a rules from breaking the wordmark lockup */
.foot-col a.brand{display:inline-flex;align-items:baseline;gap:11px;padding:0;font-size:16px}
.foot-col a.brand:hover{color:inherit}

/* ③ hero brand panel: hide on mobile (overrides the later base .hero-art rule) */
@media (max-width:880px){ .hero-art{display:none} }

/* =========================== Phase 2: auth + mypage =================== */
.auth-wrap,.mypage-wrap{max-width:680px;padding-bottom:90px}
.auth-card{background:var(--bg-1);border:1px solid var(--line);border-radius:14px;padding:28px;margin-top:8px}
.auth-card .field{margin-bottom:14px}
.agree{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--ink-2);margin:6px 0 16px;line-height:1.6}
.agree input{margin-top:3px}
.agree a{color:var(--lime)}
.auth-alt{font-size:13px;color:var(--muted);margin:14px 0 0;text-align:center}
.auth-alt a{color:var(--lime)}
.btn-block{display:flex;width:100%;justify-content:center}

.mp-status{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:var(--bg-1);border:1px solid var(--line);border-radius:10px;padding:13px 16px;margin:10px 0 22px;font-size:14px}
.mp-status a{color:var(--lime);font-size:13px}
.mp-publish{display:flex;gap:9px;align-items:flex-start;background:rgba(199,242,60,.06);border:1px solid rgba(199,242,60,.3);border-radius:10px;padding:13px 15px;margin:18px 0;font-size:13.5px;color:var(--ink-2);line-height:1.6}
.mp-publish input{margin-top:3px}
.mp-publish b{color:var(--ink)}
.mp-actions{margin:18px 0 0}
.mp-account{margin-top:54px;border-top:1px solid var(--line);padding-top:26px}
.mp-account h2{font-family:var(--f-mono);font-size:12px;letter-spacing:.2em;color:var(--muted);margin:0 0 14px}
.mp-danger{margin-top:16px}
.mp-danger summary{cursor:pointer;color:#ff8e8e;font-size:13px}
.mp-danger p{font-size:13px;color:var(--muted);margin:12px 0}
.btn-delete{background:rgba(255,90,90,.12);color:#ff8e8e;border:1px solid rgba(255,90,90,.5);border-radius:8px;padding:9px 18px;font-size:13px;cursor:pointer;font-weight:600}
.btn-delete:hover{background:rgba(255,90,90,.2)}

/* ---- front-end profile editor (dark mirror of the admin metabox) ---- */
.sqadd-mp .sqadd-box label{font-weight:600;font-size:12.5px;display:block;margin-bottom:5px;color:var(--ink-2)}
.sqadd-mp input[type=text],.sqadd-mp input[type=number],.sqadd-mp input[type=password],.sqadd-mp select,.sqadd-mp textarea{width:100%;background:var(--bg);border:1px solid var(--line-2);border-radius:8px;color:var(--ink);padding:9px 11px;font-size:14px;font-family:inherit}
.sqadd-mp textarea{line-height:1.6}
.sqadd-mp input:focus,.sqadd-mp select:focus,.sqadd-mp textarea:focus{outline:none;border-color:var(--lime)}
.sqadd-mp input[type=file]{font-size:13px;color:var(--ink-2)}
.sqadd-mp small{color:var(--muted)}
.sqadd-mp .sqadd-row{border:1px solid var(--line);border-radius:10px;padding:13px;margin-bottom:10px;position:relative;background:var(--bg-1)}
.sqadd-mp .sqadd-row p{margin:0 0 9px}.sqadd-mp .sqadd-row p:last-child{margin-bottom:0}
.sqadd-mp .sqadd-del{position:absolute;top:8px;right:8px;border:0;background:none;cursor:pointer;color:#ff8e8e;font-size:18px;line-height:1}
.sqadd-mp .sqadd-sub{font-weight:700;margin:22px 0 10px;border-top:1px solid var(--line);padding-top:16px;font-size:14px;color:var(--ink);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sqadd-mp .sqadd-roles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.sqadd-mp .sqadd-roles label{font-weight:500;font-size:13px;border:1px solid var(--line-2);border-radius:8px;padding:10px;cursor:pointer;display:flex;gap:8px;align-items:center;color:var(--ink-2);margin:0}
.sqadd-mp .sqadd-roles label:hover{border-color:var(--lime)}
.sqadd-mp .sqadd-panel{border:1px solid var(--line);border-left:3px solid var(--lime);border-radius:10px;padding:16px;margin:14px 0;background:var(--bg-1)}
.sqadd-mp .sqadd-panel-h{font-weight:700;margin-bottom:10px;color:var(--ink)}
.sqadd-mp .sqadd-panel-h b{font-family:var(--f-mono);color:var(--lime);margin-right:6px;font-size:12px}
.sqadd-mp .sqadd-chips{display:flex;flex-wrap:wrap;gap:6px}
.sqadd-mp .sqadd-chip{font-weight:500;border:1px solid var(--line-2);border-radius:6px;padding:6px 10px;font-size:12.5px;background:var(--bg);cursor:pointer;display:flex;gap:6px;align-items:center;color:var(--ink-2);margin:0}
.sqadd-mp .sqadd-chip:hover{border-color:var(--lime)}
.sqadd-mp .sqadd-chip input,.sqadd-mp .sqadd-roles input{width:auto;margin:0}
.sqadd-mp .sqadd-dgrp{margin:12px 0}.sqadd-mp .sqadd-dh{font-size:12.5px;color:var(--muted);margin-bottom:7px;font-weight:600}
.sqadd-mp .sqadd-hint{color:var(--muted);font-size:12.5px;margin:7px 0;line-height:1.6}
.sqadd-mp .sqadd-gallery{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0}
.sqadd-mp .sqadd-gthumb{position:relative;width:90px;border:1px solid var(--line-2);border-radius:8px;overflow:hidden;background:var(--bg);display:block}
.sqadd-mp .sqadd-gthumb img{width:90px;height:90px;object-fit:cover;display:block}
.sqadd-mp .sqadd-gthumb .rm{display:flex;gap:4px;align-items:center;justify-content:center;font-size:11px;color:var(--ink-2);padding:4px;background:var(--bg-1)}
.sqadd-mp .sqadd-gthumb .rm input{width:auto;margin:0}
.sqadd-mp .button{background:var(--bg);border:1px solid var(--line-2);color:var(--ink-2);border-radius:7px;padding:6px 12px;font-size:12.5px;cursor:pointer;font-family:inherit}
.sqadd-mp .button:hover{border-color:var(--lime);color:var(--ink)}
@media(max-width:760px){.sqadd-mp .sqadd-roles{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.sqadd-mp .sqadd-roles{grid-template-columns:1fr}}

/* ⑦ heading-tag resets (semantic h2 where divs/spans were) */
.role-group .role-head h2.nm{margin:0}
.card h2.name{margin:0}

/* ① modern gallery widget (mypage) */
.sqgx{margin:8px 0}
.sqgx-grid{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.sqgx-item{position:relative;width:104px;height:104px;border-radius:10px;overflow:hidden;border:1px solid var(--line-2);background:var(--bg);cursor:grab}
.sqgx-item img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.sqgx-item.dragging{opacity:.45}
.sqgx-del{position:absolute;top:5px;right:5px;width:24px;height:24px;border-radius:50%;border:0;background:rgba(0,0,0,.62);color:#fff;font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.sqgx-del:hover{background:rgba(214,40,40,.92)}
.sqgx-main{position:absolute;left:5px;bottom:5px;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:11px;padding:4px 8px;border-radius:6px;cursor:pointer}
.sqgx-main:hover{background:var(--lime);color:#0b0b0c}
.sqgx-badge{position:absolute;left:5px;top:5px;background:var(--lime);color:#0b0b0c;font-size:10px;font-weight:700;padding:3px 7px;border-radius:5px;display:none}
.sqgx-item.is-main .sqgx-badge{display:block}
.sqgx-item.is-main .sqgx-main{display:none}
.sqgx-add{background:var(--bg);border:1px dashed var(--line-2);color:var(--ink-2);border-radius:10px;padding:11px 18px;font-size:13px;cursor:pointer;font-family:inherit}
.sqgx-add:hover{border-color:var(--lime);color:var(--ink)}

/* ② warning note (unverified) */
.form-note.warn{background:rgba(255,196,0,.08);border:1px solid rgba(255,196,0,.45);color:#ffd87a}

/* ⑤③ role grid on mypage: tiled checkboxes, open row spans full width (panel inline) */
.sqadd-mp .sqadd-rolelist{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0 0;align-items:start}
.sqadd-mp .sqadd-role-row{border:1px solid var(--line-2);border-radius:10px;overflow:hidden;background:var(--bg);align-self:start}
.sqadd-mp .sqadd-role-row.is-open{grid-column:1/-1}
.sqadd-mp .sqadd-role-toggle{display:flex;gap:9px;align-items:flex-start;padding:12px;cursor:pointer;margin:0;font-weight:600;color:var(--ink);font-size:13.5px;line-height:1.4}
.sqadd-mp .sqadd-role-toggle span{flex:1}
.sqadd-mp .sqadd-role-toggle input{width:auto;margin:2px 0 0;flex:0 0 auto}
.sqadd-mp .sqadd-role-row.is-open .sqadd-role-toggle{border-bottom:0}
.sqadd-mp .sqadd-role-row .sqadd-panel{display:none;margin:0;border:0;border-top:1px solid var(--line-2);border-left:3px solid var(--lime);border-radius:0;padding:14px;background:var(--bg-1)}
.sqadd-mp .sqadd-role-row.is-open .sqadd-panel{display:block}
@media(max-width:760px){.sqadd-mp .sqadd-rolelist{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.sqadd-mp .sqadd-rolelist{grid-template-columns:1fr}}

/* ⑥ responsive WORK/MENU sub-rows (stack on mobile, textareas show full content) */
.sqadd-mp .frow{display:flex;gap:10px}
.sqadd-mp .frow>p{flex:1;margin:0 0 9px}
.sqadd-mp .sqadd-row textarea{min-height:52px;resize:vertical}
@media(max-width:600px){.sqadd-mp .frow{flex-direction:column;gap:0}.sqadd-mp .frow.frow-inline{flex-direction:row;gap:10px}}

/* ⑨⑩ experience / stance badges beside the status badge */
.role-head .meta-badge{font-family:var(--f-mono);font-size:11px;letter-spacing:.03em;padding:3px 9px;border:1px solid var(--line-2);border-radius:999px;color:var(--ink-2);white-space:nowrap}
.role-head .meta-badge.stance{border-color:rgba(199,242,60,.4);color:var(--lime)}

/* search: single column + full-width button on phones */
@media(max-width:460px){
  .search-grid{grid-template-columns:1fr}
  .search-grid .sg-go{justify-self:stretch;min-width:0;width:100%}
}

/* ② homepage logo as h1 without affecting layout; footer label is not a heading */
.brand-h1{margin:0;display:contents}
/* ③ detail section labels are h3 but keep the eyebrow look */
h3.eyebrow{margin:0}